Detailed explanation of the use of mapState and mapActions in VUE

Recently, I am developing a system. The front-end uses VUE development. Since I am a back-end developer, I will have a little front-end, but VUE has not been exposed to much. I will record some pitfalls encountered in VUE project development. It is not that the professional front-end is not well written, so don’t worry. . .

MapState and mapActions are often used in VUE projects. MapState is mainly used to synchronize global variables or objects. MapActions is mainly used to synchronize methods defined. Generally, the two are used in combination. MapState synchronizes global variables or objects defined in the project. MapActions is used to call the global method defined by the method when the variable or object is empty.

mapActions and mapState need to refer to vuex, so you need to use the following code to introduce it in the page

import { mapActions, mapState } from 'vuex'

Since the global data needs to be saved to the local cache, the store needs to be referenced and the global object or variable code is defined as follows

import store from './store'

const state = {
  userName,
  token,
  refreshToken,
  tokenExpire,
  menus: []
}
(Vuex)
export default new ({
  state,
  actions, // Some custom methods  mutations // Customize the method of modifying the status})

If you need to get the menus object on a certain page, you can use mapState. If the menus object already has a value, you can get it and synchronize it directly.

import { mapActions, mapState } from 'vuex'
computed: {
    ...mapState([
      'menus'
    ])
// If you want to usemenusObject，Just use it directly

If menus have no value, you need to use mapActions to synchronize the method and determine whether menus are empty in the page. If they are empty, call action to obtain and save, and other pages can be directly obtained.

import { mapActions, mapState } from 'vuex'
methods: {
    ...mapActions([
      'getMenus'
    ])
if ( === 0)
　 () // Call method to obtain，heregetMenusIf you are getting data from the interface，Need to use asynchronous，Otherwise there may be problems

Write it according to your own understanding and record it. If there is anything incorrect, please feel free to correct it.

This is the article about the detailed explanation of the use of mapState and mapActions in VUE. For more related content on using vue mapState and mapActions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!