Vuex 笔记

Vuex中的模块化-Module
如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

由此，就有了Vuex的模块化

模块化中的命名空间
// 放置子模块
  modules: {
    user: {
      namespaced: true, // 加锁  模块化的命名空间
      state: {
        token: '12345'
      },
      mutations: {
        changeToken(state) {
          state.token = '6789'
        }
      }
    },
    setting: {
      state: {
        name: 'zs'
      }
    }
  }
 访问的时候:

  <button @click="changeFn">修改token</button>
    <button @click="changeToken">3. 直接调用修改token</button>
 
methods: {
    ...mapMutations(["user/changeToken"]),
    ...userMapMutations(["changeToken"]),
    changeFn() {
      // 1. 模块名/方法名
      //   this.$store.commit("user/changeToken");
 
      // 2. 通过展开运算符 提取出["user/changeToken"]
      this["user/changeToken"]();
 
      // 3. 直接调用
    },
  },
 
 

在根getters中:
  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
    filterList(state) {
      return state.list.filter(item => item > 5)
    },
    // token: state => state.user.token,
    // name: state => state.setting.name
// 建立快捷访问
    userToken(state) {
      return state.user.token
    },
    settingName(state) {
      return state.setting.name
    },
 
  },
 

导入:
import { mapMutations, createNamespacedHelpers } from "vuex";
const { mapMutations: userMapMutations } = createNamespacedHelpers("user");