vuex笔记2

最新推荐文章于 2025-03-22 22:52:04 发布

原创最新推荐文章于 2025-03-22 22:52:04 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了Vuex中的模块化管理，当项目规模增大时，为避免状态管理复杂性，可以使用模块化。通过设置`namespaced`，可以为每个模块创建独立的命名空间。在访问模块中的mutations和getters时，需要指定模块名称。同时，使用`createNamespacedHelpers`辅助函数，可以更方便地进行模块内的方法映射。这样提高了代码的可读性和可维护性。

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");