Accessing the current route in a Vuex module using Vue.js

Question

Accessing the current route in a Vuex module using Vue.js

I've created a vuex store with namespaces that retrieves a specific store entry based on the current route parameter.

import Router from '../../router/index'

const options = {
  routeIdentifier: 'stepId'
}

export function fetchFromRoute(state) {
  if (!options.routeIdentifier || !Router.currentRoute.params) {
    return null
  }

  return state.all.find(item => {
    return item.identifier === Router.currentRoute.params[options.routeIdentifier]
  })
}

While this function works correctly on initial load, it doesn't automatically update when the route changes.

Is there a way to force the getter to recalculate upon route change?

javascript vue.js vuex vue-router vuex-modules

Answer 1

Answer №1

It is recommended to import the store in the router module instead of the other way around. Utilize the beforeEach navigation guard to store the current route in the store. Start by setting up the store:

store.js

state: {
  route: null
},
mutations: {
  SET_ROUTE(state, route) {
    state.route = route;
  }
},
modules: { ... }

In the router module, implement the beforeEach guard to save the current route, which is represented by the to argument:

router.js

import store from '@/store';  // Import the store in the router module

const router = new VueRouter({
  ...
})

router.beforeEach((to, from, next) => {
  store.commit('SET_ROUTE', to);
  next();
});

To retrieve this route in a Vuex module getter, access it using the third getter argument, rootState:

store/someModule.js

getters: {
  getRoute(state, getters, rootState) {
    return rootState.route;
  }
}

Answer 2

It is recommended to import the store in the router module instead of the other way around. Utilize the beforeEach navigation guard to store the current route in the store. Start by setting up the store:

store.js

state: {
  route: null
},
mutations: {
  SET_ROUTE(state, route) {
    state.route = route;
  }
},
modules: { ... }

In the router module, implement the beforeEach guard to save the current route, which is represented by the to argument:

router.js

import store from '@/store';  // Import the store in the router module

const router = new VueRouter({
  ...
})

router.beforeEach((to, from, next) => {
  store.commit('SET_ROUTE', to);
  next();
});

To retrieve this route in a Vuex module getter, access it using the third getter argument, rootState:

store/someModule.js

getters: {
  getRoute(state, getters, rootState) {
    return rootState.route;
  }
}

Accessing the current route in a Vuex module using Vue.js

Answer №1

Similar questions

I'm encountering a RangeError in nextjs when trying to pass props to a child component

Start by declaring a scope variable using AngularJS

Adjusting the hue of the Vuetify app-bar expansion

There seems to be an issue with loading data for the grid from the JSON

What causes RangeError: Maximum call stack size exceeded when Element UI event handlers are triggered?

Javascript encountering issues with recognizing 'self.function' within an onclick event

What is the best way to set a value in PHP that can be utilized as flight plan coordinates on a Google Map within my script?

The axios library fails to send formdata to the server

What steps can be taken to resolve the error "Incompatible types: TodoItem undefined cannot be assigned to type TodoItem"?

Tips for resolving the error message "SyntaxError: Unexpected identifier" when conducting tests on vuetify components with jest

Retrieve the initial occurrence that meets the conditions across three columns in MySQL

What are the steps to generate an npm package along with definition files?

Deleting an added element upon closing the dialog box

Passing an array through ajax from PHP to JavaScript using a properly formatted JSON structure

Anticipated outcome for absent callbacks in module API implementation

Having trouble getting my parallax slideshow to work with jquery preventDefault

The 'target' property is not found on the specified 'string' type

What's the deal with receiving [object Object] in my JavaScript JSON document?

Obtain a masterpiece by creating a canvas in React

Encountering a 500 internal server error or receiving an error message stating "invalid value for stripe.confirmCardPayment