简单写写vuex

直接用模块化吧  毕竟多了就需要模块化 少了 用一个模块化也没问题

首先在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);
  },
};