Vuex 快速入門

Vuex 快速入門

基本用途：

• 將某些data變成組件間公用的狀態，組件隨時都可以進行訪問和響應，解決了props傳值的鏈式響應的代碼冗餘

• 給狀態配以公用方法，將狀態的變更及時響應並處理

基本用法：

/store/store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        sideBarOpened: false
        //放置公用狀態
    },
    getters: {
        changeState: state => {
            //相當於vue實例中的methods,用於處理公用data
            //自vuex 面向組件的數據處理
        }
    },
    mutations: {
        //寫法與getters相類似
        //組件想要對於vuex 中的數據進行的處理
        //組件中採用this.$store.commit('方法名') 的方式調用，實現充分解耦
        //內部操作必須在此刻完成(同步)
    },
    actions: {
        //使得mutations能夠實現異步調用，實現例如延遲調用
        increment ({ commit }, payload) {
            commit('突變方法名')
            //payload應該是一個對象，可通過模板方法調用傳入對象的方式將數據從組件傳入vuex
        },
        asyncIncrement({commit}) => {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    },
    modules: {
        //引入某一個state的以上集合的模塊，會自動分別填充到上面，使得結構更加清晰
    }
});

main.js

import { store } from './store/store'
*
*
new Vue({
  el: '#app',
  store,    //注入根組件
  ...
})

訪問vuex中的數據和方法

this.$store.state.數據名
this.$store.getters.方法名

受影響組件局部定義計算屬性響應變化數據

computed: {
     open () {
          return this.$store.state.sideBarOpened
     }
}

將 store 中的 getters/mutations 映射到局部(計算屬性/方法)使用mapGetters/mapMutations輔助函數

import { mapGetters } from 'vuex'

computed: {
  // 使用對象展開運算符將 getters 混入 computed 對象中
    ...mapGetters([
        //映射 this.doneTodosCount 爲 store.getters.doneTodosCount
      'doneTodosCount',
      //'getter名稱',

      // 映射 this.doneCount 爲 store.getters.doneTodosCount
        doneCount: 'doneTodosCount'
      // 三個點表示將內部拿出生成鍵值對，這樣使得組件本身的計算屬性不受影響
      // 此語法依賴babel-preset-stage-2
    ])
  }

注意事項：

mutation 必須是同步函數 — devtool要保存快照，方便追蹤狀態變化

使用 v-model 綁定 vuex 計算屬性的時候要設置get 和 set 才能雙向綁定

computed: {
    value: {
        get () {
            return this.$store.getters.value;
        },
        set (event) {
            this.$store.dispatch('updateValue', event.target.value);
        }
    }
}