vuex之module

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

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

• 在src下建立文件夹store，用于存放各个模块以及根级别的文件

• 在index.js文件中导出store

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
import userManager from './modules/userManager'
import productManager from './modules/productManager'

Vue.use(Vuex);

//组装模块并导出 store 的地方
export default new Vuex.Store({
  //根节点相关
  state,
  mutations,
  getters,
  actions,

  //模块相关
  modules: {
    um:userManager,
    pm:productManager,

  },

});

• 在main.js文件的Vue实例中注册store

import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store, //注册store
  components: {App},
  template: '<App/>'
});

• 模块级别的文件中写于自己相关的代码

1、访问模块局部的状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

//局部mutations
  mutations: {

    //action中提交该mutation
    GETALLPRODUCT(state, data) {
      //当页面DOM元素即页面结构加载完成后执行此方法
      state.ProductList = data;
    },
  },

//局部getters，根节点状态会作为第三个参数暴露出来
  getters: {
    getHotProduct (state，getters,rootState) {
      return state.ProductList.filter(product => product.type === 1)
    },
    getHotProductById: (state) => (id) => {
      return state.ProductList.find(product => product.id === id)
    }
  }
}

同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：

 actions: {

    getAllProduct(context) {
      //局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：

      //发送get请求获取API数据
      axios.get(' http://127.0.0.1:8000/api/Productdata/')
        .then((response) => {
          // handle success
          context.commit('GETALLPRODUCT', response.data);
          console.log('getters',context.getters.getHotProduct)

        })
}

2、命名空间

　　默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

　   如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

export default {

  namespaced: true, //拥有自己的命名空间

  state: {
    ProductList: [],

  },
  mutations: {
  },

  actions: {
  },

  getters: {
    getHotProductById: (state) => (id) => {
      return state.ProductList.find(product => product.id === id)
    }

  }

}

此时，在组件中调用就需要根据路径进行调用：

2.1 调用模块中的state

    computed: {
      UserList() {
        return this.$store.state.um.UserList //UserList 是在模块中定义的state状态
      },
    },

2.2 调用模块中getters

        computed:{
          hotProductArray(){

            return this.$store.getters['pm/getHotProduct'] //调用无参getters

          }
        }

      methods:{
          getProductById(){
        this.$store.getters['pm/getHotProductById'](this.id) //调用有参数的getters

              }

          }
      },            

2.3 提交actions

        mounted() {

          this.$store.dispatch("pm/getAllProduct") //提交局部模块的actions
        },

3、在带命名空间的模块注册全局 action

若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。

    //在有命名空间actions中注册全局action因为有root: true,
    getAllUserList: {
      root: true,
      handler (context, payload) {
        //发送get请求获取API数据
        axios.get(' http://127.0.0.1:8000/api/userdata/')
          .then((response) => {
            // handle success
            context.commit('um/GETALLUSER', response.data); //全局中使用局部的mutation
            console.log(response.data)

          })
          .catch((error) => {
            // handle error
            console.log(error);
          })
          .finally(() => {
            // always executed
          });

      } // -> 'someAction'
    },

此时虽然这个antion在某个模块文件内，但是确实全局的命名空间，因此像分发action这类的操作可以直接这样：

this.$store.dispatch("getAllUserList");

参考文档：https://vuex.vuejs.org/zh/guide/modules.html