## 一、概述 Vuex 是一個專為 Vue.js 應用程序開發的**狀態管理模式**。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。 獨立安裝： ``` npm install vuex --save ``` 詳細api參考：[https://vuex.vuejs.org/zh/api/#vuex-store](https://vuex.vuejs.org/zh/api/#vuex-store) ## 二、原理 Vuex 應用的核心就是 store（倉庫）。store基本上就是一個容器，它包含著你的應用中大部分的狀態 (state) 。核心是由以下五步法組成： 1. State：Vuex 使用單一狀態樹——是的，用一個對象就包含了全部的應用層級狀態； 2. Getter：Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。Getter 會暴露為 store.getters 對象： 3. Mutation：Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數(handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數，payload作為第二個參數（額外的參數）：***mutation 必須是同步函數***；Mutation 通過 `store.commit` 觸發； 4. Action：Action 類似于 mutation，Action 提交的是 mutation，而不是直接變更狀態Action 可以包含任意異步操作；Action 則通過 `store.dispatch` 方法觸發 5. Module:Vuex 使用的是單一狀態樹，應用的所有狀態會集中到一個對象中。如果項目比較大，那么相應的狀態數據肯定就會更多，這樣的話，store 對象就會變得相當的臃腫，非常難管理。因此，引入module來進行模塊化管理； #### 注意： >[danger] >1、組件通過 Dispatch 調用 Actions，Actions 通過 Commit 調用 Mutations，Mutations 更改 State 數據狀態，最后返回給組件 渲染視圖；  2、當然，在實際應用中，這五個部分并不是必須的，你需要用到什么就添加什么。但是一般再怎么簡單的 Vuex，也至少會由 State 和 Mutation 構成； 3、你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。 ## 三、實例 ~~~ <!--父組件中引入子組件--> <template> <div> <a href="javascript:;" @click="$store.state.show = true">點擊</a> <t-dialog></t-dialog> </div> </template> <script> import dialog from './components/dialog.vue' export default { components:{ "t-dialog":dialog } } </script> <!--子組件--> <template> <el-dialog :visible.sync="$store.state.show"></el-dialog> </template> <script> export default {} </script> ~~~ ## 四、實戰 工程化的實踐方案； 1、在項目的src目錄下新建一個目錄store，在該目錄下新建一個index.js文件，我們用來創建vuex實例，然后在該文件中引入vue和vuex，創建Vuex.Store實例保存到變量store中，最后使用export default導出store： ``` import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); export default new vuex.Store({ state:{ show:false } }) ``` 2、在main.js文件中引入該文件，在文件里面添加 import store from ‘./store’;，再在vue實例全局引入store對象； ``` //vuex import store from './store' new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } }) ``` >[danger] 這里`$store.state.show`無論哪個組件都可以使用 , 那組件多了之后 , 狀態也多了 , 這么多狀態都堆在 store 文件夾下的`index.js`不好維護怎么辦，所以，繼續優化處理； > 3、我們可以使用 vuex 的`modules`, 把 store 文件夾下的`index.js`改成 : ``` import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); import dialog_store from '../components/dialog_store.js';//引入某個store對象 export default new vuex.Store({ modules: { dialog: dialog_store } }) ``` 4、這里我們引用了一個`dialog_store.js`, 在這個 js 文件里我們就可以單獨寫 dialog 組件的狀態了 : ``` export default { state:{ show:false } } ``` 做出這樣的修改之后 , 我們將之前我們使用的`$store.state.show`統統改為`$store.state.dialog.show`即可。 >[danger] 如果還有其他的組件需要使用 vuex , 就新建一個對應的狀態文件 , 然后將他們加入 store 文件夾下的 index.js 文件中的`modules`中。 ~~~ modules: { dialog: dialog_store, other: other,//其他組件 } ~~~ 5、前面我們提到的對話框例子 , 我們對vuex 的依賴僅僅只有一個 $store.state.dialog.show 一個狀態 , 但是如果我們要進行一個操作 , 需要依賴很多很多個狀態 , 那管理起來又麻煩，通過引入mutations 解決問題； ``` export default { state:{//state show:false }, mutations:{ switch_dialog(state){//這里的state對應著上面這個state state.show = state.show?false:true; //你還可以在這里執行其他的操作改變state } } } ``` 使用 mutations 后 , 原先我們的父組件可以改為 : ``` <template> <div id="app"> <a href="javascript:;" @click="$store.commit('switch_dialog')">點擊</a> <t-dialog></t-dialog> </div> </template> <script> import dialog from './components/dialog.vue' export default { components:{ "t-dialog":dialog } } </script> ``` 使用`$store.commit('switch_dialog')`來觸發`mutations`中的`switch_dialog`方法。這里需要注意的是: A、mutations中的方法是不分組件的 , 假如你在 dialog\_stroe.js 文件中的定義了 switch_dialog方法 , 在其他文件中的一個switch_dialog方法 , 那么$store.commit('switch_dialog')會執行所有的switch_dialog方法。 B、`mutations`里的操作必須是同步的。 6、多個`state`的操作 , 使用`mutations`會來觸發會比較好維護 , 那么需要執行多個 mutations 就需要用`action`了； ``` export default { state:{//state show:false }, mutations:{ switch_dialog(state){//這里的state對應著上面這個state state.show = state.show?false:true; //你還可以在這里執行其他的操作改變state } }, actions:{ switch_dialog(context){//這里的context和我們使用的$store擁有相同的對象和方法 context.commit('switch_dialog'); //你還可以在這里觸發其他的mutations方法 }, } } ``` 7、 getters getters 和 vue 中的 computed 類似 , 都是用來計算 state 然后生成新的數據 ( 狀態 ) 的。 8、mapState、mapGetters、mapActions 這些是輔助函數；很多時候 ,$store.state.dialog.show$store.dispatch('switch_dialog')這種寫法又長又臭 , 很不方便 , 我們沒使用 vuex 的時候 , 獲取一個狀態只需要this.show, 執行一個方法只需要this.switch_dialog就行了 , 使用 vuex 使寫法變復雜了。使用mapState、mapGetters、mapActions就不會這么復雜了。mapGetters、mapActions 和 mapState 類似 ,mapGetters一般也寫在computed中 ,mapActions一般寫在methods中。