Vuex 進階——模組化組織 Vuex

摘要： 上上篇：Vuex 入門 上一篇：Vuex 提升 自制vuex LOGO 前兩篇講解了一下 Vuex 的基本使用方法，可是在實際專案中那麼寫肯定是不合理的，如果元件太多，不可能把所有元件的資料都放到一個 store.js 中的，所以就需要模組化的組織 Vuex...

上上篇：Vuex 入門

上一篇：Vuex 提升

前兩篇講解了一下 Vuex 的基本使用方法，可是在實際專案中那麼寫肯定是不合理的，如果元件太多，不可能把所有元件的資料都放到一個 store.js 中的，所以就需要模組化的組織 Vuex，首先看一下 專案結構 。

一、首先執行以下命令：

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

二、按照上圖結構建立檔案目錄

三、編寫檔案

我們就延用上兩篇文章中的例子。先說一個各個檔案的作用

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
}
})
複製程式碼

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>
複製程式碼

最後，驚心動魄的時候到了，我這費半天勁的東西到底能不能跑起來

對於新手們來說，光是看一次可能很難理解這個過程，還是要親自多試一試的，有什麼問題，歡迎留言，謝謝觀摩！