在VUE項目中經常會用到mapState和mapActions，mapState主要用于同步全局的變量或者對象，mapActions主要是用于同步定義的方法，一般兩者是結合使用，mapState同步項目中定義的全局的變量或者對象，mapActions是用于變量或者對象為空時，調用方法定義的全局方法獲取。

mapActions和mapState需要引用vuex,所以在頁面里面需要使用下面的代碼引入

import { mapActions, mapState } from 'vuex'

由于全局數據需要保存到本地緩存中，所以需要在main.js中引用store，并且定義全局的對象或者變量代碼如下

import store from './store'

const state = {
  userName,
  token,
  refreshToken,
  tokenExpire,
  menus: []
}
Vue.use(Vuex)
export default new Vuex.Store({
  state,
  actions, // 自定義的一些方法
  mutations // 自定義的修改狀態(tài)的方法 
})

如果需要在某個頁面獲取menus的對象，就可以使用 mapState，如果menus對象已有值就獲取直接同步過來

import { mapActions, mapState } from 'vuex'
computed: {
    ...mapState([
      'menus'
    ])
// 如果要使用menus對象，直接使用this.menus即可

如果menus沒有值就需要使用mapActions,將方法同步過來，在頁面里面判斷menus是否為空，如果為空，調用action獲取并且保存，其他頁面就可以直接獲取了

import { mapActions, mapState } from 'vuex'
methods: {
    ...mapActions([
      'getMenus'
    ])
if (menus.length === 0)
　 this.getMenus() // 調用方法獲取，這里getMenus如果是從接口獲取數據，需要使用異步，否則可能會有問題

根據自己的理解寫的，記錄一下，如果有什么不正確的地方，歡迎更正。

到此這篇關于VUE中的mapState和mapActions的使用詳解的文章就介紹到這了,更多相關vue mapState和mapActions使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: