Vue教程24：Vuex Modules（完結）

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

該節教程代碼可經過npm start運行devServer，在http://localhost:8080/#/index查看效果

運行服務端請cd server，node server.js。

建立Vuex模塊

咱們能夠新建兩個Vuex模塊，名爲src/store/mod_a.js和src/store/mod_b.js。 每一個Vuex模塊均可以看作一個獨立的store對象，裏面能夠有屬於它本身的State、Actions、Mutations等等。

代碼示例：/lesson24/src/store/mod_a.js

新建模塊代碼以下：

export default {
  state: {
    str: 'store_a'
  },
  mutations: {
    'mod_a.setStr': function (state, s){
      alert('a的setStr');
      state.str=s;
    }
  },
  actions: {
    'mod_a.setStr': function ({commit}, s){
      commit('mod_a.setStr', s);
    }
  }
}
複製代碼

在實例化Store對象時，能夠引入模塊。

import ModA from './mod_a'
import ModB from './mod_b'
複製代碼

同時將模塊配置到Store中：

export default new Vuex.Store({
  modules: {
    mod_a: ModA,
    mod_b: ModB
  }
})
複製代碼

讀取模塊數據

代碼示例：/lesson24/src/components/Index.vue

在組件中，就能夠經過$store.state.mod_a.str讀取到模塊內的state。

a_str: {{$store.state.mod_a.str}}<br>
b_str: {{$store.state.mod_b.str}}<br>
複製代碼

固然更推薦的是使用mapState的方式讀取，可是和直接讀取Store下的值（...mapState(['a', 'b'])）不一樣，讀取模塊中的State須要經過方法獲取：

computed: {
  ...mapState({
    str_a: state=>state.mod_a.str,
    str_b: state=>state.mod_b.str,
  }),
}
複製代碼

這樣就能夠在template中經過str_a和str_b獲取到模塊的state。

a_str: {{str_a}}<br>
b_str: {{str_b}}<br>
複製代碼

觸發一個Action

假設每一個模塊中都有一個名爲setStr的Action，咱們在運行this.$store.dispatch('setStr', 'test')時，全部模塊中的同名Action都會被執行。

Mutation也具備一樣的特色。但這不是Vuex的Bug，它的用意是讓使用者可以經過一個Action同時更新多個模塊的數據。

若須要迴避這個問題，則能夠給每一個模塊中的Action單獨命名，一般咱們會加上模塊名做爲前綴：

代碼示例：/lesson24/src/store/mod_a.js

export default {
  state: {
    str: 'store_a'
  },
  mutations: {
    'mod_a.setStr': function (state, s){
      alert('a的setStr');
      state.str=s;
    }
  },
  actions: {
    'mod_a.setStr': function ({commit}, s){
      commit('mod_a.setStr', s);
    }
  }
}
複製代碼

在使用時，只須要分別mapActions：

代碼示例：/lesson24/src/components/Index.vue

此時有兩種方法能夠mapActions：

1. ...mapActions(['mod_a.setStr', 'mod_b.setStr'])。 此時須要經過methods運行\this['mod_a.setStr'](str)來觸發Action。此時須要經過methods運行\this['mod_a.setStr'](str)來觸發Action。 但在template中直接調用，如<input type="button" value="設置A" @click="'mod_b.setStr'">會報錯。
2. ...mapActions({ set_a: 'mod_a.setStr', set_b: 'mod_b.setStr' })。 這種方法的好處是，因爲已經替換了方法名，在template中能夠直接調用，如<input type="button" value="設置A" @click="set_a('aaa')">

完整示例代碼以下：

<template>
  <div>
    str: {{$store.state.str}}<br>
    a_str: {{$store.state.mod_a.str}}<br>
    b_str: {{$store.state.mod_b.str}}<br>
    a_str: {{str_a}}<br>
    b_str: {{str_b}}<br>
    <input type="button" value="設置A" @click="setA('aa')">
    <input type="button" value="設置B" @click="setB('bb')"><br/>
    <input type="button" value="設置A" @click="set_a('aaa')">
    <input type="button" value="設置B" @click="set_b('bbb')">
  </div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex';

export default {
  name: 'Index',
  data () {
    return {
      
    }
  },
  async created(){
    await this.readUsers();
  },
  methods: {
    ...mapActions(['addA', 'addB', 'setOnline', 'readUsers', 'mod_a.setStr', 'mod_b.setStr']),
    ...mapActions({
      set_a: 'mod_a.setStr',
      set_b: 'mod_b.setStr'
    }),
    setA(str) {
      this['mod_a.setStr'](str)
    },
    setB(str) {
      this['mod_b.setStr'](str)
    },
  },
}
</script>
複製代碼