系列导航

Module用法

一、基本知识

1、Module是模块的意思, 为什么在Vuex中我们要使用模块呢?

（1）Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.

（2）当应用变得非常复杂时,store对象就有可能变得相当臃肿.

（3）为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等

2、代码组织形式

二、效果

页面中调用action中的方法

三、目录结构

四、源码

index.js

import { createStore} from 'vuex'
import moduleA from './modules/moduleA'

export default createStore({
	state: {
		counter: 0,
	},
	mutations: {
	},
	actions: { 
	},
	getters: { },
	modules: {
		 a: moduleA
	}
})

moduleA.js

export default {
  state: {
    name: '张三'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  getters: {
    fullname(state) {
      return state.name + 'AAAAAA'
    },
    fullname2(state, getters) {
      return getters.fullname + 'BBBBBB'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  actions: {
    aUpdateName(context,payload) {
      console.log(context);
      setTimeout(() => {
        context.commit('updateName', payload)
      }, 1000)
    }
  }
}

App.vue