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 components
this.$store.state
To access thestore
In 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 here
mapState
andmapMutations
Directly,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