詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用
更新時間：2022年06月20日 16:43:14 作者：Burnner
這篇文章主要介紹了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以參考下
在開始接觸vuex框架的時候?qū)δ切﹕tate,action,mutation,getter等理解的還挺順利的，然后突然出來一種加了一個前綴的mapState等，這樣的就有點蒙圈了。。。特別是官方的文檔并沒有給除詳細(xì)的說明跟例子。。。然后就自己慢慢理解了一下。其實也就是一個重命名而已。。。以下就是例子，希望能幫助理解：
在store中代碼
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 10,
numb: 10086
},
getters: {
add: (state, getter) => {
state.count = getter.add;
return state.count;
},
},
mutations: {
increment(state,){
state.count += 2;
},
},
actions: {
actionA({ dispatch, commit }) {
return commit('add');
},
}
}); export default store;
在調(diào)用的模塊里面的代碼如下：
<template>
<div class="hello">
<button @click="increment">加{{count}}</button>
</div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
increment(){
this.$store.dispatch('incrementsync').then(() => {
console.log('then');
});
}
},
computed: mapState({ // mapState相當(dāng)于映射
count: 'numb', //這個時候count應(yīng)該等于多少？??！ 是等于store文件里面的count呢還是等于numb？答案是等于numb！這邊的意思是mapState把'numb'的值映射給了count，所以count等于10086
})
}
</script> 這個時候按鈕應(yīng)該顯示加10還是顯示加10086？答案是加10086，所以map其實就是一個在store文件中的映射而已，就是不用讓你要調(diào)用一個值需要敲這么多代碼：this.$state.count;而只需要用count。。。
界面效果：
好了，其他的mapAction，mapMutations的原理是一樣樣的。
總結(jié)
以上所述是小編給大家介紹的詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
VUE使用vue?create命令創(chuàng)建vue2.0項目的全過程
vue-cli是創(chuàng)建Vue項目的一個腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vite結(jié)合Vue刪除指定環(huán)境的console.log問題
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue3響應(yīng)式實現(xiàn)readonly從零開始教程
這篇文章主要為大家介紹了vue3響應(yīng)式實現(xiàn)readonly從零開始教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
在Vue中,強(qiáng)制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見的三種vue強(qiáng)制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要為大家詳細(xì)介紹了vue日期時間工具類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
下面小編就為大家分享一篇在Vue組件上動態(tài)添加和刪除屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
使用WebStorm運(yùn)行vue項目的詳細(xì)圖文教程
在WebStorm中怎么打開一個已有的項目,這個不用多說,那么如何運(yùn)行一個vue項目呢?下面這篇文章主要給大家介紹了關(guān)于使用WebStorm運(yùn)行vue項目的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue登錄路由驗證的實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
解決vue的router組件component在import時不能使用變量問題
這篇文章主要介紹了解決vue的router組件component在import時不能使用變量問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實現(xiàn)原理，感興趣的同學(xué)可以參考一下2023-04-04