javascript - Vue.js - Mendapatkan rute saat ini di modul Vuex

Saya memiliki store Vuex dengan namespace yang mengembalikan sebuah entri dari store berdasarkan parameter dari rute saat ini.

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

const options = {
  routeIdentifier: 'stepId'
}

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

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

Ini berfungsi seperti yang diharapkan saat pemuatan awal. Namun, itu tidak dimuat ulang setiap kali rute berubah.

Apakah ada cara untuk memuat ulang/memaksa perhitungan ulang getter saat rute berubah?

Jawaban #1

Akan lebih didukung untuk mengimpor store di modul router daripada sebaliknya. Anda dapat menggunakan beforeEach navigation guard untuk mengatur rute saat ini di store. Pertama, siapkan store:

store.js

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

Dalam modul router, gunakan penjaga beforeEach untuk menyimpan rute saat ini, yang merupakan argumen to:

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();
});

Untuk mengakses rute ini dalam getter modul Vuex, akses melalui argumen getter ketiga, rootState:

store/someModule.js

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