VUE中的mapState和mapActions的使用詳解
最近在開發(fā)一套系統(tǒng)，前端使用VUE開發(fā)，由于本人是后端開發(fā)，前端也會(huì)一點(diǎn)，但是VUE接觸不多，在VUE項(xiàng)目開發(fā)遇到的一些坑記錄一下，不是專業(yè)前端寫好的不好，大家不要唝。。。
在VUE項(xiàng)目中經(jīng)常會(huì)用到mapState和mapActions，mapState主要用于同步全局的變量或者對(duì)象，mapActions主要是用于同步定義的方法，一般兩者是結(jié)合使用，mapState同步項(xiàng)目中定義的全局的變量或者對(duì)象，mapActions是用于變量或者對(duì)象為空時(shí)，調(diào)用方法定義的全局方法獲取。
mapActions和mapState需要引用vuex,所以在頁面里面需要 使用下面的代碼引入
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è)頁面獲取menus的對(duì)象，就可以使用 mapState，如果menus對(duì)象已有值就獲取直接同步過來
import { mapActions, mapState } from 'vuex'
computed: {
...mapState([
'menus'
])
// 如果要使用menus對(duì)象，直接使用this.menus即可如果menus沒有值就需要使用mapActions,將方法同步過來，在頁面里面判斷menus是否為空，如果為空，調(diào)用action獲取并且保存，其他頁面就可以直接獲取了
import { mapActions, mapState } from 'vuex'
methods: {
...mapActions([
'getMenus'
])
if (menus.length === 0)
this.getMenus() // 調(diào)用方法獲取，這里getMenus如果是從接口獲取數(shù)據(jù)，需要使用異步，否則可能會(huì)有問題根據(jù)自己的理解寫的，記錄一下，如果有什么不正確的地方，歡迎更正。
到此這篇關(guān)于VUE中的mapState和mapActions的使用詳解的文章就介紹到這了,更多相關(guān)vue mapState和mapActions使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
超詳細(xì)圖解如何運(yùn)行vue項(xiàng)目
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,它的核心庫只關(guān)注視圖層,易于上手,也便于與其他庫或已有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于如何運(yùn)行vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了vue如何預(yù)覽后端傳來的二進(jìn)制圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過實(shí)例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點(diǎn)續(xù)傳的全局上傳插件功能
這篇文章主要介紹了基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點(diǎn)續(xù)傳的全局上傳插件,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn)
Vue3中的app.config.globalProperties是一個(gè)強(qiáng)大的全局配置功能,允許我們?cè)趹?yīng)用級(jí)別設(shè)置和訪問屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
Vue與后臺(tái)Api進(jìn)行交互通常是利用vue-resource來實(shí)現(xiàn)的，本質(zhì)上vue-resource是通過http來完成AJAX請(qǐng)求相應(yīng)的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以參考下2018-11-11
詳解如何在Vue3使用＜script lang=“ts“ setup＞語法糖
本文主要介紹了在Vue3使用＜script lang=“ts“ setup＞語法糖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了一文帶你搞定svg-icon的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05