Vuex 进阶之模块化组织详解

更新时间：2020-06-24 01:06:01 作者：startmvc

上上篇：Vuex入门上一篇：Vuex提升自制vuexLOGO前两篇讲解了一下Vuex的基本使用方法，可是在

上上篇：Vuex 入门

上一篇：Vuex 提升

自制vuex LOGO

前两篇讲解了一下 Vuex 的基本使用方法，可是在实际项目中那么写肯定是不合理的，如果组件太多，不可能把所有组件的数据都放到一个 store.js 中的，所以就需要模块化的组织 Vuex，首先看一下项目结构。

项目结构

一、首先执行以下命令：


vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm install vuex -S
npm run dev

二、按照上图结构创建文件目录

Vuex 模块化目录

三、编写文件

我们就延用上两篇文章中的例子。先说一个各个文件的作用

types.js 内定义常量，使用常量替代 mutation 事件类型

user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations，并最后统一导出（类似上个例子中的 store.js ）

getters.js 内写原来的 getters ，用来获取属性

actions.js 内写原来的 actions ，就是要执行的动作，如流程的判断、异步请求

index.js 是用来组装 actions.js 、 getters.js 、user.js 的，然后进行统一的导出

1. 在 main.js 中导入 index.js 文件并注册


import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'

new Vue({
 store,
 el: '#app',
 render: h => h(App)
})

2. 在 types.js 内定义常量并导出，默认全部大写


// 定义类型常量，默认全部大写
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

export default {
 INCREMENT,
 DECREMENT
}

注意：把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然。用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。

3. user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations


// 导入 types.js 文件
import types from "./../types";

const state ={
 count:5
}

// 定义 getters
var getters ={
 count(state){
 return state.count
 }
}

const actions ={
 increment({ commit, state }){
 // 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应，与原来 commit('increment') 的原理相同，只是把类型名换成了常量
 commit(types.INCREMENT)
 },
 decrement({commit,state}){
 if (state.count>10) {
 // 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
 commit(types.DECREMENT)
 }
 }
}

const mutations ={
 // 此处的事件为上方 actions 中的 commit(types.INCREMENT)
 [types.INCREMENT](state){
 state.count++
 },
 // 此处的事件为上方 actions 中的 commit(types.DECREMENT)
 [types.DECREMENT](state){
 state.count--
 }
}
// 最后统一导出
export default {
 state,
 getters,
 actions,
 mutations
}

注意：上方 mutations 中的 [types.INCREMENT] 写法，因为 types.INCREMENT 是一个对象，所以不能直接当做一个函数名来写，需要用到 ES2015 风格的计算属性命名功能来使用一个常量作为函数名，方能正常使用，原来的写法为：


const mutations ={
 increment(state){
 state.count ++;
 }
}

4. getters.js 内写原来的判断奇偶数方法


// 因为数据从 user.js 中获取，所以需要引入该文件
import user from './modules/user'

const getters = {
 isEvenOrOdd(state){
 // 注意数据是从 user.js 中获取的，所以写成 user.state.count
 return user.state.count % 2 == 0 ? "偶数" : "奇数"
 }
}
// 并导出
export default getters;

5. actions.js 内写原来的异步操作


// 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件
import types from './types'
const actions= {
 incrementAsync({ commit, state }) {
 // 异步操作
 var p = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve()
 }, 3000);
 });
 p.then(() => {
 commit(types.INCREMENT);
 }).catch(() => {
 console.log('异步操作');
 })
 }
}
// 最后导出
export default actions;

6. 在 index.js 中组装 actions.js 、 getters.js 、user.js 的，然后统一导出


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import getters from './getters'
import actions from './actions'
import users from './modules/user'
// 导出 store 对象
export default new Vuex.Store({
 getters,
 actions,
 modules:{
 users
 }
})

注意：在导出 store 对象时，因为 getters 和 actions 在 vuex 的核心概念中有默认，可以直接写入。但是 users 不是默认的，所以用到 vuex 中的 modules 对象进行导出

核心概念

7. Vue.app 文件不作任何修改


<template>
 <div id="app">
 <button @click="increment">增加</button>
 <button @click="decrement">减少</button>
 <button @click="incrementAsync">延时增加</button>
 <p>{{count}}</p>
 <p>{{isEvenOrOdd}}</p>
 </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
 name: 'app',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App'
 }
 },
 computed:mapGetters([
 'count',
 'isEvenOrOdd'
 ]),
 methods:mapActions([
 'increment',
 'decrement',
 'incrementAsync'
 ])
}
</script>

最后，惊心动魄的时候到了，我这费半天劲的东西到底能不能跑起来