Vuex 強調使用單一狀態樹，也就是在一個專案裡只有一個 store，這個 store 集中管理了專案中所有的資料以及對資料的操作行為。但這樣帶來的問題是 store 可能會非常臃腫龐大不易維護，所以就需要對狀態樹進行模組化的分割。
範例教學
範例是在vue-cli基礎上建構的，以下是src檔案下的內容目錄。
├── App.vue
├── components // 组件文件夹
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
├── action.js // action
├── getter.js // getter
├── index.js // vuex的主文件
├── module // 模块文件
│ ├── tab2.js
│ └── tab3.js
├── mutation-type.js // mutation常量名文件
└── mutation.js // mutation
登入後複製
效果是這樣的（不要嫌棄簡陋啊啊啊）
#在這個例子裡，把文檔裡提到的vuex的相關知識都使用了一遍，包括模組相關的知識，基本上把一般的使用場景都覆蓋了吧。
那不廢話了，開始吧。
首先app.vue和router兩部分是和路由相關，就是很簡單的東西，看看文件就能了解。
vuex的模組化
在寫這個例子之前看了很多的開源專案的程式碼，一開始蠻新鮮的，畢竟之前專案中並沒有深度使用過vuex，基本上就是一個store.js把vuex的功能就都完成了，但是專案複雜肯定不能這麼寫，剛好現在有這個需求，我就想寫個例子理一理這方面的思路。結果還是蠻簡單的。
store檔案裡的內容就是按照vuex五個核心概念建立的，這麼做的好處對於梳理業務邏輯和後期維護都是極大的方便，例如mutation.js和mutation-type.js這兩個檔案：
// mutation-type.js
const CHANGE_COUNT = 'CHANGE_COUNT';
export default {
CHANGE_COUNT
}登入後複製
// mutation.js
import type from './mutation-type'
let mutations = {
[type.CHANGE_COUNT](state) {
state.count++
}
}
export default mutations登入後複製
將mutation中的方法名稱單獨作為常數提取出來，放在單獨的檔案中，用的時候引用相關的內容，這樣非常便於管理和了解有哪些方法存在，很直觀。另一方面，有時候可能需要用到action，可以使用相同的方法名，只要再引入常數的檔案就行。
// action.js
import type from './mutation-type'
let actions = {
[type.CHANGE_COUNT]({ commit }) {
commit(type.CHANGE_COUNT)
}
}
export default actions登入後複製
怎麼樣，這樣是不是看起來就沒有寫在一個檔案裡那麼亂了。
...mapGetters和...mapActions
tab1.vue裡：
// tab1.vue
<template>
<p>
<p>这是tab1的内容</p>
<em @click="add">{{count}}</em>
<p>getter:{{NewArr}}</p>
</p>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import type from "../store/mutation-type";
export default {
computed: {
...mapGetters([
'NewArr'
]),
count: function() {
return this.$store.state.count;
},
},
methods: {
...mapActions({
CHANGE_COUNT: type.CHANGE_COUNT
}),
add: function() {
this.CHANGE_COUNT(type.CHANGE_COUNT);
}
}
};
</script>
<style lang="" scoped>
</style>登入後複製
index.js檔案裡：
import Vuex from 'vuex'
import Vue from 'vue'
import actions from './action'
import mutations from './mutation'
import getters from './getter'
import tab2 from './module/tab2'
import tab3 from './module/tab3'
Vue.use(Vuex)
let state = {
count: 1,
arr:[]
}
let store = new Vuex.Store({
state,
getters,
mutations,
actions,
modules:{
tab2,tab3
}
})
export default store登入後複製
vuex提供了一種叫做輔助函數的東西，他的好處能讓你在一個頁面集中展示一些需要用到的東西，並且在使用的時候也可以少寫一些內容，不過這個不是必須，根據自己需要取用。
要說明的是，他們兩個生效的地方可不一樣。
...mapGetters寫在本頁面的計算屬性中，之後就可以像使用計算屬性一樣使用getters裡的內容了。
...mapActions寫在本頁面的methods裡面,既可以在其他方法裡調用，甚至可以直接寫在@click裡面，像這樣：
<em @click="CHANGE_COUNT">{{count}}</em>登入後複製
醬紫，tab1裡面的數字每次點擊都會自增1。
mudule
vuex的文檔裡對於模組這部分寫的比較模糊，還是得自己實際使用才能行。
在這個例子中，我設定了兩個模組：tab2和tab3，分別對應著同名的兩個元件，當然，我這樣只是為了測試，實際看tab2就可以。
// module/tab2.js
const tab2 = {
state: {
name:`这是tab2模块的内容`
},
mutations:{
change2(state){
state.name = `我修改了tab2模块的内容`
}
},
getters:{
name(state,getters,rootState){
console.log(rootState)
return state.name + ',使用getters修改'
}
}
}
export default tab2;登入後複製
// tab2.vue
<template>
<p>
<p>这是tab2的内容</p>
<strong @click="change">点击使用muttion修改模块tab2的内容：{{info}}</strong>
<h4>{{newInfo}}</h4>
</p>
</template>
<script>
export default {
mounted() {
// console.log(this.$store.commit('change2'))
},
computed: {
info: function() {
return this.$store.state.tab2.name;
},
newInfo(){
return this.$store.getters.name;
}
},
methods: {
change() {
this.$store.commit('change2')
}
}
};
</script>
<style lang="" scoped>
</style>登入後複製
這個例子裡主要是看怎麼在頁面中呼叫模組中的stated等。
首先說state，這個很簡單，在頁面中這樣寫就行：
this.$store.steta.tab2(模块名).name
登入後複製
在本頁面的mounted中console一下$store,可以看到模組中，stete加了一層嵌套在state的。
至於action,mutation,getter，和一般的使用方法一樣，沒有任何差別。
還有就是，在getter和action中，可以透過rootState取得根結構的state，mutation中沒有此方法。
相關推薦：
Vuex提升學習分享
關於Vuex的全家桶狀態管理
實作vuex的初始化方法
以上是學會簡單的vuex與模組化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
