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
- Access $store.state.modulename.xxx directly through the module name
- Mapping via mapState:
- Default root-level mapping mapState([ xxx’ ])
- 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:
- Directly access
$store.getters['module name/xxx ']
through the module name - Mapping via mapGetters
- Default root-level mapping
mapGetters([ 'xxx' ])
- Mapping of submodules
mapGetters('module name', ['xxx'])
– namespace needs to be enabled
- Default root-level mapping
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:
- Call $store.commit(‘module name/xxx ‘, extra parameters) directly through store
- Mapping via mapMutations
- Default root-level mapping mapMutations([ xxx’ ])
- 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:
- Call $store.dispatch(‘module name/xxx ‘, extra parameters) directly through store
- Mapping via mapActions
- Default root-level mapping mapActions([ xxx’ ])
- 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
- state –> $store.state.Module name.Data item name
- getters –> $store.getters[Module name/Property name’]
- mutations –> $store.commit(Module name/Method name’, other parameters)
- 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