1. Why use modules

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.

To solve these problems, Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, and getter.

The namespace

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.

If you want your modules to be more wrapped and reusable, you can make them namespaced by adding namespaced: True. When a module is registered, all its getters, actions, and mutations are automatically named according to the path the module was registered with.

2. Download vuex

npm i vuex 
yarn add vuex // yarn 
Copy the code

3. Modify store. Js

  • Add the Store folder to the SRC folder
  • Store. Js in the store folder and rename store. Js to index.js
  • Add modules to the Store folder to store our js module

4. Use Vuex-PersistedState for persistent status

We can use state persistence to cache state and store our data easily. The usage method is as follows:

    1. Download vuex – persistedstate
npm i vuex-persistedstate
yarn add vuex-persistedstate // yarn 
Copy the code
    1. Use vuex – persistedstate
  • The storage parameter can be used to modify the location of our storage
  • Registers the module in the modules file
// store/index.js import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) import common from './modules/common' export default new Vuex.Store({ modules: {common, // common}, plugins: [createPersistedState({storage: windod. sessionStorage, // Modify the state of storage // paths: ['common'] // Store the name of the specified module (store a module object)})] // State persistence})Copy the code

5. Create a module

  • Create comomon. Js in the Module folder
  • Import common.js in store/index.js and register in modules
  • Here’s a simple example, and everything else is implemented the same way.
// state
const state = {}
// mutations
const mutations = {}
// getters
const getters = {}
// actions
const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}
Copy the code

6. state

  • Set up the state
// state
const state = {
   token:''
}
Copy the code
  • MapState auxiliary function to get
State <script> import {mapState} from 'vuex' export default {computed: {// Method 1... mapState('common', ['token']),// map to 'this. code.store.state.mon.token' // Mode 2 token () {return this. code.store.state.mon.token}}} </script>Copy the code
  • We can use this.token to obtain our token data. State, getters, mutations, actions are all the same

7. Getter

  • Set the getters

Vuex allows us to define “getters” (you can think of them as computed properties of the store) in the store. Just like evaluating properties, the return value of a getter is cached based on its dependency and is recalculated only if its dependency value changes.

The Getter accepts state as its first argument:

If you want to use global state and getter, rootState and rootGetter are passed into the getter as the third and fourth arguments,

// Getter
const getters = {
   getToken(state){
       return state.token
   }
}
Copy the code
  • MapGetters auxiliary function to get
// Getter <script> import {mapGetters} from 'vuex' export default {computed: {// Method 1... mapGetters('common', ['getToken']), / / map to ` this.$store.getters.com mon. GetToken ` way / / 2 getToken () {return this.$store.getters.com mon. GetToken}}} </script>Copy the code

8. Mutation

The only way to change the state in Vuex’s store is to commit mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make the state change.

It is recommended to use constants instead of Mutation events so that your code partners can see all mutations in your app at a glance

Parameters: Accept state as the first parameter, data the second parameter is the data we need to set, the name of this parameter can be set according to our requirements

  • Mutation
// Mutation // set the constant const SET_TOKEN_DATA = 'setTokenData' const mutations = {[SET_TOKEN_DATA](state,data){state.token =  data; }}Copy the code
  • MapMutation assisted function acquisition
// Mutation <script> import {mapMutations} from 'vuex' export default {methods:{Mutation <script> import {mapMutations} from 'vuex' export default {methods:{ MapMutations ('common',['setTokenData' // map 'this.settokendata ()' to 'this.code.store.mit ('common/setTokenData')']), // Method 2 can be set by alias... mapMutations({ setToken: 'common/setTokenData' // Map 'this.settoken ('123')' to 'this.settoken ('123')' as' this. code. store.com MIT ('common/setTokenData','123') '}), Use this. Codestore.com MIT ('common/setTokenData','123')}} </script>Copy the code

9. Action

  • The Action commits mutation rather than a direct state change.
  • Actions can contain any asynchronous operation.

The Action function accepts a context object with the same methods and properties as the store instance, so you can submit a mutation by calling context.mit. Or get state and getters via context.state and context.getters.

// const Action = {// params: // Method 1 getTokenData(context,params){context.com MIT (SET_TOKEN_DATA, params)}, GetTokenData ({commit},params){commit(SET_TOKEN_DATA, params)},}Copy the code
  • MapMutation assisted function acquisition
State <script> import {mapActions} from 'vuex' export default {methods:{// mode 1... MapActions ('common',['getTokenData' // map 'this.getTokenData()' to 'this.$store.dispatch('common/getTokenData')']), // Method 2 can be set by alias... MapActions ({getData:'common/getTokenData' // will 'this.getData('123')' Map to 'this.$store.dispatch('common/getTokenData','123')'}), $store. Dispatch ('common/getTokenData','123')}} </script>Copy the code

Inadequacies, please do not hesitate to advise!!