vuex的模块化组织

在实际项目中，咱们只掌握到vuex的基本操做，显然是不行的，在项目中若是组件太多，不可能把全部组件的数据都放到一个 store.js 中的，因此就须要模块化的组织 Vuex，首先看一下 项目结构。

 

项目结构

1、首先执行如下命令：

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

2、按照上图结构建立文件目录

 

Vuex 模块化目录

3、编写文件

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

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> 

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

 

vuex模块化.gif

对于新手们来讲，光是看一次可能很难理解这个过程，仍是要亲自多试一试的，有什么问题，欢迎你们一块儿探讨。