關于vuex的使用

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

簡單來說就是一個全局的變量管理，在項目中都是可以用到里面的變量。

vuex的核心

vuex的安裝及使用

一、vuex的安裝

npm install vuex --save     // 如果安裝了淘寶鏡像，可以使用 cnpm安裝

二、vuex的使用

　　新建store的js，引入vue和vuex

 　　在實例中注冊store

 三、store中變量的定義、管理、派生（getter）

　　1、state — 狀態

　　在store實例中注冊state并在state中定義變量text，也可以給一個初始值；在組件中使用$store.state.text使用定義的變量

 　2、mutation — 更改 store 中的狀態的唯一方法

　　vuex中規定只能通過提交mutation的方式去更改store中的狀態，包括action中的操作，也是通過提交mutation去修改，且mutation中不能包含異步操作

　　說明：在mutations里聲明了兩個方法，一個是不帶參數更新text，一個是帶參數更新text，在示例文件的methods里，

　　　　　通過this.$store.commit('方法名'， ‘傳參’) 調用，從而達到修改store的狀態

　　3、action — 異步更改狀態

 　　　action 可支持異步修改state的狀態，而修改state的唯一方法是通過mutation，那么想要在action里面修改state，則需要提交一個mutation，由mutation去做修改

 　　說明：<1>、在actions里聲明了兩個異步方法，一個是不帶參數更新text，一個是帶參數更新text，在示例文件的methods里，

　　　　　　　通過this.$store.dispatch 調用actions的方法，在actions里執行異步操作，通過commit提交mutation，在mutation中修改store的狀態

　　　　　 <2>、store.dispatch 的分發傳參時的兩種形式(載荷形式，對象形式)，載荷形式：store.dispatch('方法名'， '傳參')；對象形式：store.dispatch({ type: ‘方法名’，key: value, [ ... ] })

 　　4、getter — store中state的派生狀態

　　　　可以理解為 store 的計算屬性，  更像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算，然后返回結果

 　　說明：通過 getter 拿到的是相當于計算后的值，所以通過對象的方式傳值

　　　　　如果需要傳值計算，那么此時相當于是調用getters里面的方法，所以 getter 的值需要是一個方法， 通過雙箭頭函數返回，傳參在后面的箭頭函數，第一個箭頭函數的state是派生的state狀態

　　5、module

　　　　使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象會變得相當臃腫

　　　　Vuex 允許我們將 store 分割成模塊（module），每個模塊擁有自己的 state、mutation、action、getter

 　　　　注：由于 modules 也是一個對象，渲染數據時要帶上對象的key (store.state.module1.名稱)

　　6、vuex輔助函數

　　　　mapState、mapMutations、mapGetters、mapActions

　　　　<1>、mapState

 　　<2>、mapMutations

　　<3>、mapGetters

　　<4>、mapActions

　7、vuex 的命名空間

 　　默認情況下，模塊內部的 action、mutation 和 getter 是注冊在全局命名空間的，則不同模塊有相同命名的mutations、actions時，不同模塊對同一命名的 mutation 或 action 都會作出響應；

　　　　且模塊過多時，在使用輔助函數mapState、mapGetters、mapMutations、mapActions時很難查詢引用的state、getters、mutations、actions來自于哪個模塊，不便于后期維護

　　此時我們可通過添加 namespaced: true 的方式使其成為帶命名空間的模塊(命名空間)，當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據模塊注冊的路徑調整命名

　　　　方法一：　　　　　　　　　　　　　　　　　　　　　　　　方法二：

　　　　說明：當開啟命名空間后，通過輔助函數獲取 store 的值時，若未指定空間名且全局命名空間中沒有該變量，將獲取不到該變量參數