vue中moudles的作用及使用方法

Posted 2021-02-01 mrxinxin

1.作用：vuex允许把store分割为模块，每一个模块都有自己的state,actions,getters,mutations甚至是嵌套一些子模块，从上到下进行同样方式的分割

　　在文件src中创建一个文件夹store，包含index.js就是store.js ，然后再创建文件夹modules文件夹，此文件夹中放的就是模块，

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)
import menu from ‘./modules/menu‘
export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  },
  modules:{
    menu
  }
})

 

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

 2.对数据的处理方式

组件调用数据，逗需要通过action

在actions中进行数据的处理请求等草左，

然后action在把数据调教给mutation，mutation在对state中的数据进行处理

（只有mutation具有资格能够修改state中的数据，）

3.命名空间

在模块中添加namesapced：true

添加了以后在哪dispatch和commit的时候木块名就需要路径+模块名