vuex的模块化使用，你真的会使用了吗？

1、为什么使用模块化

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

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。

2、修改store文件夹下面的文件

1、建立一个名为modules的文件夹名，里面存放的是我们的模块文件,我这里下面存放了一个user.js的文件，用来存放用户信息
2、修改stroe下面index文件，

效果

1、在index.js中引入user.js模块

import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user.js";
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user,
  },
});

2、user.js模块

export default {
  state: {
    name: 123123,
  },
  mutations: {
    mutationsBtn(state, val) {
      state.name = val;
    },
  },
  actions: {
    actionBtn({ commit }, val) {
      commit("mutationsBtn", val.name);
    },
  },

  getters: {},
  namespaced: true,
};

注解

getter，mutation，action 他们默认都是注册在全局命名空间的，所以我们默认是可以和使用根状态一样去使用他们，但是这样不可避免会出现命名冲突的问题，所以使模块有更高的封装性与复用性，我们可以通过添加 `namespaced: true` 使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

3、组件内引用

//非createNamespacedHelpers方法用法
import { mapState, mapActions,mapGetters,mapMutations } from "vuex";

//如果你当前组件用的 vuex 状态都是一个模块的话，我们可以使用 createNamespacedHelpers 创建基于某个命名空间辅助函数

import { createNamespacedHelpers } from 'vuex' 
const { mapState, mapActions }=createNamespacedHelpers('user')

4、state(mapState)

computed:{
   //方法一 自定义变量:(state)=>state.模块.变量
   ...mapState({ name: (state) => state.user.name }),   
   //方法二  模块，变量
   ...mapState('user', ['name']),
   //使用
   this.name
         
   //createNamespacedHelpers方法用法
    ...mapState({ name: (state) => state.name }),
}

5、mutations(mapMutations)

methods:{ 
   //方法一 {自定义方法:"模块/mutations下面的方法"}
   ...mapMutations({mutationsBtn:"user/mutationsBtn"})
   //方法二 模块，变量
   ...mapMutations('user', ['mutationsBtn']),
   //使用
   this.mutationsBtn(参数)
   
   //直接使用
   this.$store.commit("user/mutationsBtn",参数)
}

6、actions(mapActions)

methods:{ 
   //方法一 {自定义方法:"模块/mapActions下面的方法"}
   ...mapActions({actionBtn:"user/actionBtn"})
   //方法二 模块，变量
   ...mapActions('user', ['mutationsBtn']),
   //使用
   this.actionBtn(参数)
   
   //方法三 直接调用
   this.$store.dispatch('common/mutationsBtn',参数)
}

7、getters(mapGetters)

computed:{
   //方法一 自定义变量:(state)=>state.模块.变量
    this.$store.getters["user/gettersBtn"];
   //方法二  模块，变量
   ...mapGetters('user', ['gettersBtn']),
}

8、整个文件-最终效果

user.js

export default {
  state: {
    name: 123123222,
  },
  mutations: {
    mutationsBtn(state, val) {
      state.name = val;
      console.log(state.name);
    },
  },
  actions: {
    actionBtn({ commit }, val) {
      commit("mutationsBtn", val.name);
    },
  },
  getters: {
    gettersBtn(state, getters, rootState) {
      //三个参数 state getters rootState
      //第一个是模块内的 state，第二个是 模块内的 getters，第三个是根节点状态 rootState，
      return state.name + 1234567890;
    },
  },
  namespaced: true,
};

tenplate.vue

<template>
  <div class="about">
    <h1>{{ getters }}</h1>
    <a @click="btnClick()">asdhhjkas{{ gettersBtn }}</a>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },

  computed: {
    ...mapState("user", ["name"]),
    ...mapGetters("user", ["gettersBtn"]),

    getters() {
      return this.$store.getters["user/gettersBtn"];
    },
  },

  mounted() {
    console.log(this.name);
  },

  methods: {
    ...mapActions({ actionBtn: "user/actionBtn" }),
    ...mapMutations("user", ["mutationsBtn"]),
    btnClick() {
      // this.actionBtn({ name: 123456 });
      this.mutationsBtn(457689);
      // this.actionBtn({ name: 123 });
    },
  },
};
</script>

9、使用 vuex-persistedstate

npm i vuex-persistedstate 
yarn add vuex-persistedstate
可以通过storage参数来修改我们存储的位置
modules文件中注册模块

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

import common from './modules/common'

export default new Vuex.Store({
  modules: {
    common, // 公用
  },
  plugins: [
    createPersistedState({
      storage: window.sessionStorage, // 修改存储的状态
      // paths: ['common'] // 存储的指定的模块的名字（存储某个模块对象）
    })
  ] // 状态持久化
})