vuex · 前端菜鳥成長記

[TOC] # vuex Vuex 是一個專為 Vue.js 應用程序開發的**狀態管理模式**。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化 ***** ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // state存放數據 state:{num:0,}, // getters對state中的數據做處理，相當于computed（getters是全局的） getters :{}, // mutations做同步操作，（定時器，axios都不可使用），相當于組件中的methods mutations :{}, // actions做異步操作，實際修改state狀態值的還是mutations actions :{}, // 主模塊 modules: { } }) ``` ## 1.state state存放Vuex的數據，相當于Vue中的data >index.js ``` state:{num:0,} ``` >demo1目錄，獲取vuex中的state值 ```HTML <template> <div> //綁定，方法一 <h2>兄弟組件1 + {{this.$store.state.num}}</h2> //方法二 <h2>兄弟組件1 + {{$store.state.num}} </h2> </div> </template> ``` ## 2.getters getters對state中的數據做處理，相當于computed（但getters是全局的） >index.js目錄 ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // state存放數據 state:{num:0,}, // getters對state中的數據做處理，相當于computed（getters是全局的） getters :{ // state作為實參傳入 getNum(state){ return state.num; }, }, // mutations做同步操作，（定時器，axios都不可使用），相當于組件中的methods mutations :{}, // actions做異步操作，實際修改state狀態值的還是mutations actions :{}, // 主模塊 modules: { } }) ``` >demo2目錄，獲取getters中的值 ``` <template> <div> //綁定 <h2>兄弟組件2 + {{getNum}}</h2> //方法二 <h2>兄弟組件1 + {{$store.getters.getNum}}</h2> </div> </template> <script> export default { // 可在store中的getters屬性中寫 computed:{ // 1.方法一 computed: { getNum(){ return this.$store.getters.getNum; } }; </script> ``` ## 3.mutations 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation，每個 mutation 都有一個字符串的**事件類型 (type)**和一個**回調函數 (handler)**。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數。**只能做同步操作** ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // state存放數據 state:{num:0,}, // getters對state中的數據做處理，相當于computed（getters是全局的） getters :{ // state作為實參傳入 getNum(state){ return state.num; }, }, // mutations做同步操作，（定時器，axios都不可使用），相當于組件中的methods mutations :{// 方法 // payload，形參，如果組件在commit時傳參使用，組件不傳參則為undefined，可寫可不寫 increase(state,payload){ state.num += payload ? payload : 1 ; }, // 累減 decrease(state){ state.num--; },}, // actions做異步操作，實際修改state狀態值的還是mutations actions :{}, // 主模塊 modules: { } }) ``` >btn目錄，同步累加 ``` <template> <div>      <button @click="$store.commit('increase',2)">點擊累加</button> </div> </template> <script> export defalut { methods:{ addFn() { // 使用commit調用mutations的中的increase方法 // 傳參的話，使用payload，不傳參數為undefined // this.$store.commit('increase',2); this.$store.commit("increase"); }, } } </script> ``` ## 4.actions Action 類似于 mutation，不同在于： * Action 提交的是 mutation，而不是直接變更狀態。 * Action 可以包含任意異步操作。Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用`context.commit`提交一個 mutation，或者通過`context.state`和`context.getters`來獲取 state 和 getters ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // state存放數據 state:{num:0,}, // getters對state中的數據做處理，相當于computed（getters是全局的） getters :{ // state作為實參傳入 getNum(state){ return state.num; }, }, // mutations做同步操作，（定時器，axios都不可使用），相當于組件中的methods mutations :{// 方法 // payload，形參，如果組件在commit時傳參使用，組件不傳參則為undefined，可寫可不寫 increase(state,payload){ state.num += payload ? payload : 1 ; }, // 累減 decrease(state){ state.num--; },}, // actions做異步操作，實際修改state狀態值的還是mutations actions :{ // 異步操作，1秒后再減1 decreaseAsync(context){ context.commit('decrease'); } }, // 主模塊 modules: { } }) ``` >btn目錄，延期一秒后 -1（異步操作） ``` <template> <div>   <button @click="reduce" >點擊-1</button>  <button @click='$store.dispatch("decreaseAsync")'> 點擊 -1</button> </div> </template> <script> export defalut { methods:{ reduce(){ // $store.dispatch觸發store中的actions this.$store.dispatch('decreaseAsync'); } } } </script> ``` ## 5.modules 由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成**模塊（module）**。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割。 ***** 在子模塊中要打開命名空間，這樣便于可使用點語法獲取到子模塊的內容` namespace:true` ## 6.輔助函數輔助函數有4個，分別是mapState，mapGetters，mapMutations，mapActions。需現在使用的組件中引入輔助函數，在component中使用的是mapState，mapGetters，在methods中使用的是mapMutations，mapActions。 >demo1目錄 ``` <template> <div> <h2>兄弟組件1 + {{num}}</h2> <h2>兄弟組件1 + {{getNum}}</h2> </div> </template> <script> // 映射到store中 import {mapState,mapGetters} } from 'vuex' export default { //使用mapState方法 // 使用擴展運算符取出state中的參數對象 ...mapState(['num']), ...mapGetters(["getNum"]), }, }; </script> ``` >btn目錄 ``` <template> <div>  <button @click="increase(2)">點擊 + 1</button> <button @click="decreaseAsync()">點擊延遲 - 1</button> </template> <script> import {mapMutations , mapActions} from 'vuex' export default { methods: { // 輔助函數寫法 ...mapMutations(['increase']), ...mapActions(['decreaseAsync']), }, }; </script> ```