Record a problem AND one item from my practice (●’◡’●)

First, prepare store

1. Introduce store in main.js

  • The project directory structure looks something like this:

  • The important thing to note here is that once it is imported, it is bound globally so that it can be used in all componentsthis.$store.stateTo access thestoreIn thestate.

2. Store.js looks something like this

import Vue from 'vue'
import Vuex from 'vuex'Vuex. use(Vuex) const store = new vuex. store ({state: {userInfo: null, locationInfo: null, mutations: {/** * store user information * @param state * @param userInfo */setUserInfo: (state, UserInfo) => {state. UserInfo = UserInfo}, /** * Store location information * @param state * @param locationInfo */setLocationInfo: (state, locationInfo) => {
      state.locationInfo = locationInfo
    }
  },
  actions: {
    
  }
})

exportDefault store // Don't forget this lineCopy the code

Second, the use of

1. Return state in computed for the component

  • I’m using it heremapStateandmapMutationsDirectly,import { mapState, mapMutations } from 'vuex'In the import.

2. Use it in a method

This.setuserinfo (loginres.data) // Stores the user information in the store. Loginres.data is the passed parameterCopy the code

Three, the improved version

Many people on the Internet recommend this way to write, will be convenient management, I also plan to do this later

Four, reference

Configure vuex in MPvue and persist it to the local Storage