vue第二十单元(vux的配置中模块modules的用法)

第二十单元(vux的配置中模块modules的用法)

#课程目标

1.什么是module？ 2.怎么用module？ 3.样板代码目录结构

#知识点

#1.modules

在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。 module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

#2.目录结构

store
│  index.js
│
├─login
│      actions.js
│      getters.js
│      index.js
│      mutation-type.js
│      mutations.js
│      state.js
│
└─list
        actions.js
        getters.js
        index.js
        mutation-type.js
        mutations.js
        state.js

 

#3.根目录的index.js 代码示例

import moduleA from './login'
import moduleB from './list'
const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})

 

#4.模块内部的index.js示例

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

export default {
        namespaced: true,  //多出的一行
        state,
        mutations,
        actions,
        getters
};

 

#授课思路

#案例作业