1. 前言

1.拆分无止境,只是需要适合自己的项目
2.接下来分析下 module的用法

---

2. module

store问题

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

解决

为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

---

3. 单独的 user模块

尤其要注意的是 这个namespaced:true,
设置命名空间,
因为之前的拆分,你并不能保证没有重名的,这个命名空间就可以保证不重名,原理就是访问变量的时候加了一层,后续会看到

export default{
    // 设置独立的命名空间,避免命名冲突
    namespaced:true,
    state:{
        userInfo:{}
    },
    mutations:{
        userInfoMutation(state,obj){
            state.userInfo = obj
        }
    },
    actions:{
        userInfoActions({commit},obj){
            commit("userInfoMutation",obj)
        }
    }
}

---

4. store

这2种拆分可以共存,这里都放这做个演示

import Vuex from 'vuex'
import state from  "./state"
import mutations from "./mutations"
import actions from "./actions"
import getters from "./getters"
import user from "./user"
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    //user:user
     user
  }
})

---

5. 基础访问

访问的时候 比之前多了一层 user,所以不会重名

注意

1.这 user 和 store里面的 modules里面的保持一致

  computed: {
    userInfo() {
      // 缺点就是访问的时候 比较麻烦
      return this.$store.state.user.userInfo;
    },
  },

---

6.基础修改

使用的时候 比之前多了一层 user,所以不会重名

注意

1.这 user 和 store里面的 modules里面的保持一致
2.一定要在模块里面开启命名空间namespaced:true,

   test() {
      this.$store.commit("user/userInfoMutation", {
        test: "测试",
        name: "module写法",
      });
      console.log("store 模块写法:", this.$store.state.user);
    },

1.png

---

7.映射方法的使用 访问

就是辅助函数
解决访问的时候 过长的问题
user和和 store里面的 modules里面的保持一致

1.引入

import {mapState,mapMutations} from "vuex"

---

2. 计算属性

  computed: {
    //   映射 state里面 user 的状态
      ...mapState('user',["userInfo"]),
    userInfo() {
      // 缺点就是访问的时候 比较麻烦
      return this.$store.state.user.userInfo;
    },
  },

---

3. 直接访问

 console.log("store 模块写法:", this.userInfo);

---

4. 修改

2种写法 选一个即可

methods: {
      ...mapMutations('user',["userInfoMutation"]),
    test() {
    //   this.$store.commit("user/userInfoMutation", {
    //     test: "测试",
    //     name: "module写法",
    //   });
    this.userInfoMutation({test:"测试",name:"辅助函数"})
      console.log("store 模块写法:", this.userInfo);
    },

---

8. getter辅助

和之前的写法一样,前面多个 命名空间就行

computed:{
  ...mapGetters("user",["vipList"],
}

---

9. 目录结构

1.png

---

参考资料

vuex

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉