VUE中的mapState和mapActions的使用詳解

更新時(shí)間：2022年06月20日 16:46:01 作者：IT之家

在VUE項(xiàng)目中經(jīng)常會(huì)用到mapState和mapActions，mapState主要用于同步全局的變量或者對(duì)象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下

最近在開(kāi)發(fā)一套系統(tǒng)，前端使用VUE開(kāi)發(fā)，由于本人是后端開(kāi)發(fā)，前端也會(huì)一點(diǎn)，但是VUE接觸不多，在VUE項(xiàng)目開(kāi)發(fā)遇到的一些坑記錄一下，不是專(zhuān)業(yè)前端寫(xiě)好的不好，大家不要唝。。。

在VUE項(xiàng)目中經(jīng)常會(huì)用到mapState和mapActions，mapState主要用于同步全局的變量或者對(duì)象，mapActions主要是用于同步定義的方法，一般兩者是結(jié)合使用，mapState同步項(xiàng)目中定義的全局的變量或者對(duì)象，mapActions是用于變量或者對(duì)象為空時(shí)，調(diào)用方法定義的全局方法獲取。

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

import { mapActions, mapState } from 'vuex'

由于全局?jǐn)?shù)據(jù)需要保存到本地緩存中，所以需要在main.js中引用store，并且定義全局的對(duì)象或者變量代碼如下

import store from './store'

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

如果需要在某個(gè)頁(yè)面獲取menus的對(duì)象，就可以使用 mapState，如果menus對(duì)象已有值就獲取直接同步過(guò)來(lái)

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

如果menus沒(méi)有值就需要使用mapActions,將方法同步過(guò)來(lái)，在頁(yè)面里面判斷menus是否為空，如果為空，調(diào)用action獲取并且保存，其他頁(yè)面就可以直接獲取了

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

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

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

您可能感興趣的文章:

相關(guān)文章

vue格式化element表格中的時(shí)間為指定格式
這篇文章主要介紹了vue中格式化element表格中的時(shí)間為指定格式,需要的朋友可以參考下
2022-05-05
vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
這篇文章主要介紹了vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案，幫助大家更好的使用vue框架，感興趣的朋友可以了解下
2020-12-12
詳解VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件
這篇文章主要介紹了VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
詳解vue生命周期
這篇文章主要為大家介紹了vue的生命周期，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11
一文了解Vue中的nextTick
Vue中的 nextTick 涉及到Vue中DOM的異步更新，感覺(jué)很有意思，特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識(shí)，很多不太理解，暫且根據(jù)自己的一些感悟介紹下 nextTick
2019-05-05
vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制的方法步驟
這篇文章主要介紹了vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue入門(mén)之?dāng)?shù)據(jù)綁定(小結(jié))
本篇文章主要介紹了探索Vue高階組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能【推薦】
大家都經(jīng)常使用美團(tuán)app買(mǎi)電影票，很多朋友不知道她的功能是怎么實(shí)現(xiàn)的，作為我程序員一枚對(duì)它的算法很好奇，今天小編就把基于Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能分享到腳本之家平臺(tái)，感興趣的朋友一起看看吧
2018-08-08
Vue.js標(biāo)簽頁(yè)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js標(biāo)簽頁(yè)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一
2019-10-10
vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法
下面小編就為大家分享一篇vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03