如何将路由参数传递给vuex getter？

在Vue.js中，Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在Vuex中，getter用于从store中获取状态。

如果你想要将路由参数传递给Vuex的getter，可以通过以下几种方式实现：

1. 直接在getter中使用路由参数

首先，确保你已经在组件中获取了路由参数。然后，你可以直接在getter中使用这些参数。

// 在组件中获取路由参数
const routeParam = this.$route.params.yourParam;

// 在Vuex store中定义getter
const store = new Vuex.Store({
getters: {
yourGetter: (state) => (param) => {
// 使用路由参数param
return state.someData.filter(item => item.id === param);
}
}
});

// 在组件中使用getter
computed: {
filteredData() {
return this.$store.getters.yourGetter(routeParam);
}
}

2. 使用mapGetters辅助函数

你可以使用Vuex提供的mapGetters辅助函数来简化getter的使用。

import { mapGetters } from 'vuex';

export default {
computed: {
...mapGetters({
filteredData: 'yourGetter'
}),
routeParam() {
return this.$route.params.yourParam;
}
},
watch: {
routeParam(newVal) {
// 当路由参数变化时，重新获取数据
this.filteredData = this.$store.getters.yourGetter(newVal);
}
}
};

3. 在action中处理路由参数

另一种方式是在Vuex的action中处理路由参数，然后调用mutation来更新状态。

const store = new Vuex.Store({
state: {
someData: []
},
getters: {
filteredData: state => state.someData
},
actions: {
fetchData({ commit }, param) {
// 使用路由参数param获取数据
axios.get(`/api/data/${param}`).then(response => {
commit('SET_DATA', response.data);
});
}
},
mutations: {
SET_DATA(state, data) {
state.someData = data;
}
}
});

// 在组件中调用action
export default {
created() {
const routeParam = this.$route.params.yourParam;
this.$store.dispatch('fetchData', routeParam);
}
};