VUE中的mapState和mapActions的使用詳解

Posted on by

最近在開發一套系統，前端使用VUE開發，由於本人是後端開發，前端也會一點，但是VUE接觸不多，在VUE項目開發遇到的一些坑記錄一下，不是專業前端寫好的不好，大傢不要嗊。。。

在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的使用詳解的文章就介紹到這瞭,更多相關vue mapState和mapActions使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：