1. 前言

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

---

2. module

store问题

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

解决

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

---

3. 单独的 user模块

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

// 只是用户相关的模块
export default {
    //是否开启 命名空间
    namespaced:true,
    state: { age: 18, name: "82期" },
    mutations: {
        sayHello(state) {
            state.age++
        }
    },
    actions:{
        sayAction({commit},){
            setTimeout(()=>{
              commit("sayHello")
            })
          } 
    },
    getters: {
        //参数直接解构
        doubleAge({ age }) {
            return age * 2
        }
    }
}

---

4. store

1.这2种拆分可以共存,这里都放这做个演示
2.这里额外用了持久化 可以不用在意 以前的代码懒得改了o(╯□╰)o

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import { createStore } from 'vuex'
import userModule from './modules/user.js'
// 1. 引入持久化库
import VuexPersistence from 'vuex-persist'
// 2. 创建持久化对象
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})
export default createStore({
  state ,
  getters,
  strict: true,
  mutations,
  actions,
  // 3. 持久化配置 vuex
  plugins: [vuexLocal.plugin],
  modules: {
    userModule
  }
})

---

大体的目录结构

1.png

---

5. state getters 基础访问

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

注意

1.这 userModule 和 store里面的 modules配置保持一致

5.1直接访问

 $store.state.userModule.age 

缺点就是访问的时候 比较麻烦

---

5.2 计算属性

可以起别名 避免和本组件的名字重复

  computed: {
    age2() {
      return this.$store.state.userModule.age;
    }
  },

---

5.3 getters

注意用法 和 state不一样哦

  computed: {
    db2() {
      //模块名
      return this.$store.getters["userModule/doubleAge"];
    },
  },

6.基础修改

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

注意

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

6.1 mutation

   // 模块的名字/方法
      this.$store.commit("userModule/sayHello");

---

6.2 action

 this.$store.dispatch("userModule/sayAction")

---

7. 辅助函数/映射方法的使用访问

解决访问的时候字符过长的问题
userModule和和 store里面的 modules的配置保持一致

7.1引入

import {mapState,mapGetters,mapMutations,mapActions} from "vuex"

这里把常用的辅助函数都引用了

---

7.2 mapState

1.都是写在 computed里面
2.数组的形式,不起别名

...mapState("userModule",["age"]),

---

起别名

 ...mapState("userModule",{
          mapAge:state=>state.age
      }),

---

7.3 mapGetters

1.也是写在computed里面哦

 ...mapGetters("userModule",["doubleAge"]),

---

7.4 mapMutations

1. 写到methods里面

methods: {
      ...mapMutations("userModule",["sayHello"]),
    updateAgeMap() {
        this.sayHello()
    },

---

7.5 mapActions

1. 写到methods里面

 methods: {
    ...mapActions("userModule",["sayAction"])
 actionMap(){
        this.sayAction()  
    },

---

参考资料

vuex-模块化
vuex-module

---

初心

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

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

共勉