Vuex 笔记

最新推荐文章于 2025-12-09 14:55:59 发布

原创最新推荐文章于 2025-12-09 14:55:59 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

随着项目规模的扩大，单一的Vuex状态管理可能会变得难以维护。Vuex通过模块化来解决这一问题，允许将状态、 mutations 和 getters 分解到不同的模块中。每个模块可以设置命名空间，如`user`和`setting`，以提高代码的可读性和可维护性。在访问模块中的方法时，可以使用`mapMutations`和`createNamespacedHelpers`进行映射，例如`user/changeToken`。此外，根getters可以提供快捷访问，如`userToken`和`settingName`，方便获取模块内的特定状态。这样，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");