移动端项目总结 - Vue 的多模块编程

我们在起初会完成一些模块，后续会不断地添加模块。如果我们始终在固有的分类文件中进行修改，效率将会很低。

可以改变思路，将每个组件的状态信息抽成一个模块，每新加一个组件，我们就可以新加一个模块来与之相对应。

整体结构：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules----对应功能模块  
        ├── msite.js         # 主页模块
        ├── shop.js          # 店铺模块
        ├── user.js          # 用户模块
        └── ...

1. 每一个模块都是一个对象，内部包含四个子对象： 

// msite.js
export default {
  state: () => ({ a:1 }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

// shop.js
export default {
  state: () => ({ b:{} }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

// user.js
export default {
  state: () => ({ c:[] }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

2. 在store中引入模块

// store.js
import msite from 'msite.js'
import user from 'user.js'
import shop from 'shop.js'

export default new Vuex.Store({
  mutations,  // 总的mutations，它内部看到的是总的state
  actions,    // 总的actions，在这里面commit会去查找所有匹配的mutation（包括全局的和每个模块的）
  getters,    // 总的getters，它内部看到的是总的state

  modules:{
    msite,
    user,
    shop
  }
})

3. 总的state结构

{
  msite: { },
  user: { },
  shop: { }
}

4. 模块是一个包含各种状态信息（state、mutation、action、getter）的JS文件，我们在组件中，想要使用模块中的状态时，该怎么做？

// Mstie.vue
import {mapState} from 'vuex';
export default{
  computed: {
    ...mapState({
      address: state => state.miste.address,  // state是总状态，函数的返回值就是计算属性值
      categorys: state => state.miste.categorys,
      shops: state => state.miste.shops
    })
  }
}

5. 可以看到，我们在这种情况是用不到 props 的，因为所有的状态都是从 vuex 中获取，即通过 stateName: state => state.moduleName.stateName 的方式来获取。