To read more articles in this series please visit myMaking a blog, sample code please visithere.

You can run devServer through NPM start to see the tutorial code at http://localhost:8080/#/index

Run CD server, node server.js on the server.

Create a Vuex module

We can create two Vuex modules named SRC /store/mod_a.js and SRC /store/ mod_B.js. Each Vuex module can be regarded as an independent store object, which can have its own State, Actions, Mutations, and so on.

Code example: /lesson24/ SRC /store/ mod_A

The new module code is as follows:

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); }}}Copy the code

When you instantiate a Store object, you can introduce modules.

import ModA from './mod_a'
import ModB from './mod_b'
Copy the code

Also configure the module into Store:

export default new Vuex.Store({
  modules: {
    mod_a: ModA,
    mod_b: ModB
  }
})
Copy the code

Reading module data

Code examples: / lesson24 / SRC/components/Index. The vue

In the component, the state in the module can be read with $store.state.mod_A.

a_str: {{$store.state.mod_a.str}}<br>
b_str: {{$store.state.mod_b.str}}<br>
Copy the code

Of course, it is recommended to use mapState, but it is not the same as reading directly from Store (… MapState ([‘a’, ‘b’]));

computed: { ... mapState({ str_a: state=>state.mod_a.str, str_b: state=>state.mod_b.str, }), }Copy the code

This will get the module state from str_A and str_B in template.

a_str: {{str_a}}<br>
b_str: {{str_b}}<br>
Copy the code

Trigger an Action

Assuming that each module has an Action named setStr, when we run this.$store.dispatch(‘setStr’, ‘test’), all the module actions with the same name will be executed.

Mutation also had the same characteristics. This is not a Vuex Bug, however, it is intended to allow users to update data from multiple modules simultaneously with one Action.

To get around this problem, we can give each module Action a separate name, usually prefixed by the module name:

Code example: /lesson24/ SRC /store/ mod_A

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); }}}Copy the code

To use, just separate mapActions:

Code examples: / lesson24 / SRC/components/Index. The vue

There are two ways to mapActions:

  1. . MapActions ([‘ mod_a. SetStr ‘, ‘mod_b. SetStr’]). This [‘ mod_A. SetStr ‘](STR) will be run through methods to trigger Action. This [‘ mod_A. SetStr ‘](STR) will be run through methods to trigger Action. will return an error.
  2. . MapActions ({set_A: ‘mod_A. setStr’, set_B:’ mod_B.setstr ‘}).

The complete sample code is as follows:

<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="Set up A" @click="setA('aa')">
    <input type="button" value="Set B" @click="setB('bb')"><br/>
    <input type="button" value="Set up A" @click="set_a('aaa')">
    <input type="button" value="Set 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>
Copy the code