Vuex的使用及map方法

Vuex

• 概念：在Vue中實現集中式狀態（數據）管理的一個Vue插件，對vue應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用於任意組件間的通信

• 使用場景：多個組件需要共享數據

• 搭建Vuex環境

  • 創建文件：src/store/index.js

    // 該文件用於創建Vuex中最為核心的store
    // 引入Vuex
    import Vue from 'vue'
    // 引入Vuex插件
    import Vuex from "vuex"
    Vue.use(Vuex)
    // 准備actions--用於響應組件的動作
    const actions = {}
    // 准備mutations--用於操作數據（state）
    const mutations = {}
    // 准備state--用於存儲數據
    const state = {}
    
    const store = new Vuex.Store({
      actions,
      mutations,
      state,
    })
    
    export default store;
    

  • 在main.js中創建vm時傳入store配置項

    // 引入創建的store
    import store from "./store"
    
    new Vue({
      el: '#app',
      render: h=>h(App),
      // 使用store
      store,
      ...
    })
    

• 具體使用

  • 組件使用

    methods: {
      add() {
        this.$store.dispatch("add", params);
      },
      ...
    }
    

  • src/store/index.js配置

    // 准備actions--用於響應組件的動作
    const actions = {
      add(context, value) {
        context.commiit("ADD", value);
      },
      ...
    }
    // 准備mutations--用於操作數據（state）
    const mutations = {
      ADD(state, value) {
        state.sum += value;
      },
      ...
    }
    // 准備state--用於存儲數據
    const state = {
      sum: 0,
      ...
    }
    

getters的使用

• 概念：當state中的數據需要經過加工后在使用時，可以使用getters加工

• 在store/index.js中追加getters配置

  ...
  // 准備getters--用於將state中的數據進行加工
  const getters = {
    change(state){
      return state.sum*10
    },
  }
  
  const store = new Vuex.Store({
    ...
    getters,
  })
  

• 組件中讀取數據

  $store.getters.change
  

組件中四個map方法的使用

• mapState方法：用於幫助我們映射state中的數據為計算屬性

  computed: {
    // 通過mapState生成以上計算屬性從state中讀取數據（對象方式）
    ...mapState({sum2:'sum'}),
    // 通過mapState生成以上計算屬性從state中讀取數據（數組方式）,要求計算屬性名稱和state中讀取的屬性名一致
    ...mapState(['sum']),
  }
  

• mapGetters方法：用於幫助我們映射getters中的數據為自定義方法

  methods: {
    // 通過mapGetters生成以上自定義方法從getters中讀取數據（對象方式）
    ...mapGetters({change:'change'}),
    // 通過mapGetters生成以上自定義方法從getters中讀取數據（數組方式）,要求自定義方法和getters中讀取的方法名稱一致
    ...mapGetters([change]),
  }
  

• mapActions方法：用於幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數

  methods: {
    // 通過maActions生成incrementOdd，incrementWait（對象方式）：如果需要傳遞參數，則在點擊調用時傳遞參數即可采用以下方式
    ...mapActions({incrementOdd: 'addOdd', incrementWait: 'addWait'}),
    // 通過mapActions生成incrementOdd，incrementWait（數組方式）：如果需要傳遞參數，則在點擊調用時傳遞參數即可采用以下方式，
    // 要求計算屬性名稱和actions方法名一致
    // ...mapActions(['addOdd', 'addWait']),
  }
  

• mapMutations方法：用於幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數

  methods: {
    // 通過mapMutations生成increment，decrement（對象方式）：如果需要傳遞參數，則在點擊調用時傳遞參數即可采用以下方式
    ...mapMutations({increment: 'ADD', decrement: 'SUB'}),
    // 通過mapMutations生成increment，decrement（數組方式）：如果需要傳遞參數，則在點擊調用時傳遞參數即可采用以下方式，
    // 要求計算屬性名稱和mutations方法名一致
    // ...mapMutations(['ADD', 'SUB']),
  }
  

模塊化+命名空間

• 目的：讓代碼更好的維護，讓多種數據分類更加明確。

• 修改store.js

  const CountOptions {
    // 命名空間為true，組件即可使用該配置
    namespaced: true,
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...},
  }
  const PersonOptions {
    // 命名空間為true，組件即可使用該配置
    namespaced: true,
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...},
  }
  const store = new Vuex.Store({
    modules: {
      // 模塊化編程，引入模塊配置（組件配置）
      CountAbout: CountOptions,
      PersonAbout: PersonOptions,
    }
  })    
  

• 開啟命名空間后，組件中讀取state數據：

  // 方式一：自己直接讀取
  this.$store.state.PersonAbout.xxx;
  // 方式二：借助mapState讀取
  ...mapState('CountAbout',{sum:'sum', sum2:'sum'});
  

• 開啟命名空間后，組件中讀取getters數據：

  // 方式一：自己直接讀取
  this.$store.getters['PersonAbout/xxx'];
  // 方式二：借助mapGetters讀取
  ...mapGetters('CountAbout',{xxx:'xxx'});
  

• 開啟命名空間后，組件中調用dispatch：

  // 方式一：自己直接調用dispatch
  this.$store.dispatch('CountAbout/xxx', params);
  // 方式二：借助mapActions讀取
  ...mapActions('CountAbout',{xxx:'xxx'});
  

• 開啟命名空間后，組件中調用commit：

  // 方式一：自己直接調用commit
  this.$store.commit('CountAbout/xxx', params);
  // 方式二：借助mapMutations讀取
  ...mapMutations('CountAbout',{xxx:'xxx'});