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

對於新手們來講，光是看一次可能很難理解這個過程，仍是要親自多試一試的，有什麼問題，歡迎你們一塊兒探討。