VUE中的mapState和mapActions如何使用

本文小編為大家詳細介紹“VUE中的mapState和mapActions如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“VUE中的mapState和mapActions如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

在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 // 自定義的修改狀態的方法 
})

如果需要在某個頁面獲取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如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。