Why modularity?

Because of the use of a single state tree, all the states of an application are grouped into one large object. When the application becomes very complex, the Store object can become quite bloated.

This means that if you put all the states in state, the Vuex will become more and more difficult to maintain as the project gets larger and larger

Hence the modularity of Vuex

Simple application of modularity

application

Define two modules user and setting

User manages user status tokens

Setting Specifies the name of the management application

const store  = new Vuex.Store({
  modules: {
    user: {
       state: {
         token: '12345'}},setting: {
      state: {
         name: 'Vuex instance'}}})Copy the code

Define child-b component to display user token and application name name respectively

<template> <div> <div> User token {{$store.state.user.token}}</div> <div>  </template>Copy the code

Note: To get the state of the submodule, go to $store.state. Module name. Property name

Getting looks a little tricky, but we can change that with getters, which we learned earlier

 getters: {
   token: state= > state.user.token,
   name: state= > state.setting.name
 } 
Copy the code

Note that this getters is a root level getters

Referenced by mapGetters

computed: { ... mapGetters(['token'.'name'])}Copy the code

Namespaces in modularity

Namespace namespaced

Here, pay attention to understanding

By default, actions, mutations, and getters inside a module are registered in the global namespace — enabling multiple modules to respond to the same mutation or action.

The action, mutation, and getter of the user module are the same as those of the setting module. The action, mutation, and getter of the user module can be called globally

  user: {
       state: {
         token: '12345'
       },
       mutations: {
        // State represents the state of the user
         updateToken (state) {
            state.token = 678910}}},Copy the code

Called on mapMutations

methods: { ... Comcomation (comcomation (comcomation (comcomation (comcomation (comcomation (comcomation (comcomation (comcomation))))));Copy the code

However, if we want to ensure high closure of our internal modules, we can use Namespaced

High closure? So if you’re a family, and your parents can come and go and share your house with you, and you don’t feel like you have any privacy anymore, we can add a lock to our door (namespaced), and your parents can’t come and go anymore

Such as

  user: {
       namespaced: true.state: {
         token: '12345'
       },
       mutations: {
        // State represents the state of the user
         updateToken (state) {
            state.token = 678910}}},Copy the code

Use the module Action /mutations with namespaces

Option 1: Direct call – with the module’s property name path

test () {
   this.$store.dispatch('user/updateToken') // Call the method directly
}
Copy the code

Option 2: helper function – with module property name path

methods: { ... MapMutations ([' user/updateToken ']), the test () {this [' user/updateToken '] ()}} < button @ click = "test" > modify the token < / button >Copy the code

CreateNamespacedHelpers helpers create helper functions based on a specific namespace

import { mapGetters, createNamespacedHelpers } from 'vuex' const { mapMutations } = createNamespacedHelpers('user') <button @ click = "updateToken" > modify token2 < / button >Copy the code

Summary:

If you don’t understand, please add q group 147936127 or VX: LTBY52119, thank you ~