说明
对于Vuex的模块化,官方没有给出通过方法调用Getter、Mutation、Action的方式。下面通过几个简单的例子来介绍Vuex模块化在生产实践中的使用。
文件目录
- store
- index.js
- modules
- moduleA.js
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/moduleA";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
moduleA
}
});
export default store;
// state
const state = {
todoList: [{
title: '健身',
emergency: 1,
}, {
title: '吃海底捞',
emergency: 4,
}, {
title: '抽卡',
emergency: 4
}]
};
// getters
const getters = {
// 带参Getter
getEmergencyList: (state) => (emergency) => {
return state.todoList.filter(val => val.emergency === emergency)
}
};
// mutations
const mutations = {
// 带参Mutation
setTodoList(state, payload) {
state.todoList = payload.todoList;
}
};
// actions
const actions = {};
export default {
namespaced: true,
state,
mutations,
actions,
getters
};
Getter模块化使用
非模块情况下Getter通过方法调用
this.$store.getters.getEmergencyList(4)
模块化情况下Getter通过方法调用
this.$store.getters[‘moduleA/getEmergencyList’](4)
通过控制台打印此时的Getter对象,我们发现是带有’moduleA/getEmergencyList’函数的空对象,所以我们直接通过对象属性访问运算符(.)是无法访问的,需要通过中括号访问对应的方法名。
Mutation模块化使用
非模块情况下Getter通过方法调用
const todoList = [{title: ‘睡觉’,emergency: 1}]
this.$store.commit(‘setTodoList’,todoList)
模块化情况下Getter通过方法调用
const todoList = [{title: ‘睡觉’,emergency: 1}]
this.$store.commit(‘moduleA/setTodoList’,todoList)
同样的,需要加类似路径的参数