快捷導(dǎo)航

詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用

更新時(shí)間：2022年06月20日 16:43:14 作者：Burnner

這篇文章主要介紹了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以參考下

在開(kāi)始接觸vuex框架的時(shí)候?qū)δ切﹕tate,action,mutation,getter等理解的還挺順利的，然后突然出來(lái)一種加了一個(gè)前綴的mapState等，這樣的就有點(diǎn)蒙圈了。。。特別是官方的文檔并沒(méi)有給除詳細(xì)的說(shuō)明跟例子。。。然后就自己慢慢理解了一下。其實(shí)也就是一個(gè)重命名而已。。。以下就是例子，希望能幫助理解：

在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', //這個(gè)時(shí)候count應(yīng)該等于多少？??！ 是等于store文件里面的count呢還是等于numb？答案是等于numb！這邊的意思是mapState把'numb'的值映射給了count，所以count等于10086 
  }) 
 } 
</script>

這個(gè)時(shí)候按鈕應(yīng)該顯示加10還是顯示加10086？答案是加10086，所以map其實(shí)就是一個(gè)在store文件中的映射而已，就是不用讓你要調(diào)用一個(gè)值需要敲這么多代碼：this.$state.count;而只需要用count。。。

界面效果：

好了，其他的mapAction，mapMutations的原理是一樣樣的。

總結(jié)

以上所述是小編給大家介紹的詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

VUE使用vue?create命令創(chuàng)建vue2.0項(xiàng)目的全過(guò)程
vue-cli是創(chuàng)建Vue項(xiàng)目的一個(gè)腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vite結(jié)合Vue刪除指定環(huán)境的console.log問(wèn)題
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue3響應(yīng)式實(shí)現(xiàn)readonly從零開(kāi)始教程
這篇文章主要為大家介紹了vue3響應(yīng)式實(shí)現(xiàn)readonly從零開(kāi)始教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
vue強(qiáng)制刷新組件的三種方法
在Vue中,強(qiáng)制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見(jiàn)的三種vue強(qiáng)制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧
2024-04-04
vue日期時(shí)間工具類詳解
這篇文章主要為大家詳細(xì)介紹了vue日期時(shí)間工具類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
在Vue組件上動(dòng)態(tài)添加和刪除屬性方法
下面小編就為大家分享一篇在Vue組件上動(dòng)態(tài)添加和刪除屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
使用WebStorm運(yùn)行vue項(xiàng)目的詳細(xì)圖文教程
在WebStorm中怎么打開(kāi)一個(gè)已有的項(xiàng)目,這個(gè)不用多說(shuō),那么如何運(yùn)行一個(gè)vue項(xiàng)目呢?下面這篇文章主要給大家介紹了關(guān)于使用WebStorm運(yùn)行vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2023-02-02
vue登錄路由驗(yàn)證的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue登錄路由驗(yàn)證的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
解決vue的router組件component在import時(shí)不能使用變量問(wèn)題
這篇文章主要介紹了解決vue的router組件component在import時(shí)不能使用變量問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下
2023-04-04