直接用模块化吧 毕竟多了就需要模块化 少了 用一个模块化也没问题
首先在store/index.ts 中
import { createStore } from "vuex";
import globStore from "./glob-store";
export default createStore({
modules: {
globStore,
},
});
然后 就是 我们的模块 globStore
export default {
namespaced: true, //开启命名空间 有了这个才会有 模块名/属性名
state: {
//用户名
userName: "",
},
getters: {
userName(state: any) {
return state.userName;
},
},
mutations: {
setUserName(state: any, name: string) {
state.userName = name;
},
},
actions: {
setUserName(context: any, name: string) {
context.commit("setUserName", name);
},
},
};
就完成了 加了命名空间 其实就和普通的一个store 没啥区别了 不过 使用的时候 他就会给你加一个 模块名/属性名 等于是不重名的属性了 state 还是的连续点进去
我试了试 直接{{ store.store.***.****}} 在vue里就是响应式的了
当然 也可以用computed 明确的变为响应式(直接都是这么做ode 上面的就是好奇试试)
每次都getter 和dispath 需要写很多重复的代码 也可以简单的封装一下 就不用一遍遍store.dispatch 了
import store from "./index";
export default {
getters(moduleName: string, attribute: string) {
return store.getters[moduleName + "/" + attribute];
},
dispatch(moduleNmae: string, attribute: string, params: any) {
store.dispatch(moduleNmae + "/" + attribute, params);
},
};