> Vuex 是一個專為 vuejs 應用程序開發的全局狀態管理模式，可以跨頁面，跨組建之共享這些全局狀態 [TOC] # 簡單示例 ## 創建store倉庫 > 文件地址：/store/index.js ~~~ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state:{ count:0 }, mutations:{ add(state) { state.count ++; }, sub(state, n=1) { state.count -= n; } } }) export default store ~~~ ## main.js中掛載vuex ~~~ import Vue from 'vue' import App from './App' // 引入vuex import store from './store/index.js' // 把vuex定義成全局組件 Vue.prototype.$store = store Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ store, //掛載 ...App }) app.$mount() ~~~ ## 頁面調用 ~~~ <template> <view class="content"> <view>{{counter}}</view> <view>{{this.$store.state.count}}</view> <button type="default" @tap="doAdd">加加</button> <button type="default" @tap="doSub">減減</button> </view> </template> <script> export default { methods:{ doAdd(){ this.$store.commit('add') }, doSub(){ this.$store.commit('sub', 2) } }, computed:{ counter(){ return this.$store.state.count } } } </script> ~~~ # 相關參數 ## state > 把相關的變量放入state參數進行狀態管理，該參數只可讀，如要修改，請使用mutations參數 > 官方地址：https://vuex.vuejs.org/zh/guide/state.html ### mapState 輔助函數 > 當一個組件需要獲取多個狀態時，將這些狀態都在代碼中分別聲明計算屬性會比較冗余。為了解決這個問題，我們可以使用 mapState 輔助函數幫助我們生成計算屬性 #### 創建store倉庫 > 文件地址：/store/index.js ~~~ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state:{ count:0, students: [ { name: 'wk', score: 59 }, { name: 'jj', score: 80 } ] } }) ~~~ #### 頁面調用 ~~~ <template> <view class="content"> <view>{{count}}</view> <view class="" v-for="(item,index) in students" :key="index"> {{item.name}} </view> </view> </template> <script> import { mapState } from 'vuex' export default { computed:{ ...mapState([ 'count', 'students' ]) } } </script> ~~~ ## getter > 當我們需要對state進行派生或者擴展其他的處理計算時，可以選擇使用getter進行二次封裝，相當于計算屬性 > 官方地址：https://vuex.vuejs.org/zh/guide/getters.html ### mapGetters 輔助函數 > mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性 #### 創建store倉庫 > 文件地址：/store/index.js ~~~ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state:{ students: [ { name: 'wk', score: 59 }, { name: 'jj', score: 80 } ] }, getters:{ // 過濾數據，獲取大于>60分的優質學生，getter相當于計算屬性 greatStudents(state){ return state.students.filter(function(val){ return val.score > 60; }); }, // <=60的候補學生 badStudents(state) { return state.students.filter(function(val){ return val.score <= 60; }); } } }) ~~~ #### 頁面調用 ~~~ <template> <view class="content"> <view>優質學生：</view> <view class="" v-for="(item,index) in greatStudents" :key="index"> {{item.name}} </view> <view>候補學生：</view> <view class="" v-for="(item2,index2) in badStudents" :key="index2"> {{item2.name}} </view> </view> </template> <script> import { mapGetters } from 'vuex' export default { computed:{ ...mapGetters([ 'greatStudents', 'badStudents' ]) } } </script> ~~~ ## mutation > 更改 state的唯一方法是提交 mutation，并且mutation 必須是同步函數（詳情參考官方） > 官方地址：https://vuex.vuejs.org/zh/guide/mutations.html ### mapMutations 輔助函數 > 你可以在組件中使用 this.$store.commit('xxx') 提交 mutation > 或者使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用 #### 創建store倉庫 > 文件地址：/store/index.js ~~~ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state:{ count : 0 }, mutations:{ add(state){ state.count ++ }, sub(state, num) { state.count -= num } } }) ~~~ #### 頁面調用 ~~~ <template> <view class="content"> <view>{{this.$store.state.count}}</view> <button type="default" @click="add">加加加</button> <button type="default" @click="sub(2)">減減減</button> </view> </template> <script> import { mapMutations } from 'vuex' export default { methods:{ ...mapMutations([ 'add', // 將 `this.add()` 映射為 `this.$store.commit('add')` 'sub' // 將 `this.sub(num)` 映射為 `this.$store.commit('sub', num)` ]) } } </script> ~~~ ## action > Action 類似于 mutation，不同在于 > 1. Action 提交的是 mutation，而不是直接變更狀態 > 2. Action 可以包含任意異步操作 > 官方地址：https://vuex.vuejs.org/zh/guide/actions.html ### mapActions 輔助函數 > 你在組件中使用 this.$store.dispatch('xxx') 分發 action > 或者使用 mapActions 輔助函數將組件的 methods 映射為 store.dispatch 調用 #### 創建store倉庫 > 文件地址：/store/index.js ~~~ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state:{ count : 0 }, mutations:{ add(state){ state.count ++ }, sub(state, num=1) { state.count -= num } }, actions:{ //異步模擬僅供參考 addAsync(context){ setTimeout(function(){ context.commit('add') }, 1000) }, subAsync(context, num=1){ setTimeout(function(){ context.commit('sub', num) }, 1000) } } }) ~~~ #### 頁面調用 ~~~ <template> <view class="content"> <view>{{this.$store.state.count}}</view> <button type="default" @click="addAsync">加加加</button> <button type="default" @click="subAsync(2)">減減減</button> </view> </template> <script> import { mapActions } from 'vuex' export default { methods:{ ...mapActions([ 'addAsync', // 將 `this.addAsync()` 映射為 `this.$store.dispatch('add')` 'subAsync' // 將 `this.subAsync(num)` 映射為 `this.$store.dispatch('subAsync', num)` ]) } } </script> ~~~