Vuex – access state & mutations & actions & getters in modules

Article directory

    • Four core review
    • 1. Get the state data in the module
      • 1. Goal:
      • 2. Use data in modules
      • 3. Code examples
    • 2. Obtain the getters data in the module
      • 1. Goal:
      • 2. Grammar:
      • 3. Code demonstration
    • 3. Get the mutations method in the module
      • 1. Goal:
      • 2. Note:
      • 3. Calling method:
      • 4. Code implementation
    • 4. Get the actions method in the module
      • 1. Goal:
      • 2. Note:
      • 3. Call syntax:
      • 4. Code implementation
    • 5. Summary of vuex modularization
      • 1. Use directly
      • 2. Use with helper methods

Four core review

Before learning our module module, let’s review the previous four core concepts:

1. Obtain the state data in the module

1. Goal:

Master the access syntax of state in the module

Although it has been divided into modules, the status of the sub-module will still be hung in the root-level state, and the attribute name is the module name.

2. Use data in the module

  1. Access $store.state.modulename.xxx directly through the module name
  2. Mapping via mapState:
    1. Default root-level mapping mapState([ xxx’ ])
    2. Mapping of submodules: mapState(module name’, [xxx’]) – the namespace needs to be enabled namespaced:true

modules/user.js

const state = {<!-- -->
  userInfo: {<!-- -->
    name: 'zs',
    age: 18
  },
  myMsg: 'My data'
}

const mutations = {<!-- -->
  updateMsg (state, msg) {<!-- -->
    state.myMsg = msg
  }
}

const actions = {<!-- -->}

const getters = {<!-- -->}

export default {<!-- -->
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

3. Code example

1. Direct access to $store

$store.state.user.userInfo.name

2. MapState auxiliary function access (enable namespace)

...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),

2. Obtain the getters data in the module

1. Goal:

Master the access terms of getters in modules

2. Grammar:

Use data from getters in the module:

  1. Directly access $store.getters['module name/xxx '] through the module name
  2. Mapping via mapGetters
    1. Default root-level mapping mapGetters([ 'xxx' ])
    2. Mapping of submodules mapGetters('module name', ['xxx']) – namespace needs to be enabled

3. Code demonstration

modules/user.js

const getters = {<!-- -->
  //After dividing into modules, state refers to the state of the submodule
  UpperCaseName (state) {<!-- -->
    return state.userInfo.name.toUpperCase()
  }
}

Son1.vue directly accesses getters

<!-- Test getters in access module - native -->
<div>{<!-- -->{ $store.getters['user/UpperCaseName'] }}</div>

Son2.vue accessed through namespace

computed:{<!-- -->
  ...mapGetters('user', ['UpperCaseName'])
}

3. Obtain the mutations method in the module

1. Goal:

Master the calling syntax of mutation in the module

2. Note:

The mutations and actions in the default module will be mounted globally. You need to enable the namespace before they will be mounted to submodules.

3. Calling method:

  1. Call $store.commit(‘module name/xxx ‘, extra parameters) directly through store
  2. Mapping via mapMutations
    1. Default root-level mapping mapMutations([ xxx’ ])
    2. Mapping of submodules mapMutations(module name’, [xxx’]) – namespace needs to be enabled

4. Code implementation

modules/user.js

const mutations = {<!-- -->
  setUser (state, newUserInfo) {<!-- -->
    state.userInfo = newUserInfo
  }
}

modules/setting.js

const mutations = {<!-- -->
  setTheme (state, newTheme) {<!-- -->
    state.theme = newTheme
  }
}

Son1.vue

<button @click="updateUser">Update personal information</button>
<button @click="updateTheme">Update theme color</button>


export default {<!-- -->
  methods: {<!-- -->
    updateUser () {<!-- -->
      // $store.commit('Module name/mutation name', additional parameters)
      this.$store.commit('user/setUser', {<!-- -->
        name: 'xiaowang',
        age: 25
      })
    },
    updateTheme () {<!-- -->
      this.$store.commit('setting/setTheme', 'pink')
    }
  }
}

Son2.vue

<button @click="setUser({ name: 'xiaoli', age: 80 })">Update personal information</button>
<button @click="setTheme('skyblue')">Update theme</button>

methods:{<!-- -->
//Mapping of sub-modules
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}

4. Get the actions method in the module

1. Goal:

Master the calling syntax of action in the module (same principle – just compare it directly with mutation)

2. Note:

The mutations and actions in the default module will be mounted globally. You need to enable the namespace before they will be mounted to submodules.

3. Call syntax:

  1. Call $store.dispatch(‘module name/xxx ‘, extra parameters) directly through store
  2. Mapping via mapActions
    1. Default root-level mapping mapActions([ xxx’ ])
    2. Mapping of submodules mapActions(module name’, [xxx’]) – namespace needs to be enabled

4. Code implementation

need:

modules/user.js

const actions = {<!-- -->
  setUserSecond (context, newUserInfo) {<!-- -->
    // Encapsulate asynchrony in action
    setTimeout(() => {<!-- -->
      //Call mutation context. By default, the actions and mutations of your own module are submitted.
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}

Son1.vue is called directly through the store

<button @click="updateUser2">Update information in one second</button>

methods:{<!-- -->
    updateUser2 () {<!-- -->
      // Call action dispatch
      this.$store.dispatch('user/setUserSecond', {<!-- -->
        name: 'xiaohong',
        age: 28
      })
    },
}

Son2.vue mapActions mapping

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">Update information after one second</button>

methods:{<!-- -->
  ...mapActions('user', ['setUserSecond'])
}

5. Summary of vuex modularity

1. Use directly

  1. state –> $store.state.Module name.Data item name
  2. getters –> $store.getters[Module name/Property name’]
  3. mutations –> $store.commit(Module name/Method name’, other parameters)
  4. actions –> $store.dispatch(Module name/Method name’, other parameters)

2. Use with helper methods

1.import { mapXxxx, mapXxx } from vuex’

computed, methods: {

? // …mapState,…mapGetters are placed in computed;

? // …mapMutations,…mapActions are placed in methods;

? …mapXxxx(Module name’, [Data item|Method’]),

? …mapXxxx(Module name’, { new name: original name }),

}

2. Directly use the attribute {{ age }} or method @click="updateAge(2)" in the component