快捷導(dǎo)航

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

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

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

在開始接觸vuex框架的時(shí)候?qū)δ切﹕tate,action,mutation,getter等理解的還挺順利的，然后突然出來一種加了一個(gè)前綴的mapState等，這樣的就有點(diǎn)蒙圈了。。。特別是官方的文檔并沒有給除詳細(xì)的說明跟例子。。。然后就自己慢慢理解了一下。其實(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue中使用閉包(防抖和節(jié)流)失效問題
本文主要介紹了vue中使用閉包(防抖和節(jié)流)失效問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vite打包出現(xiàn)"default"?is?not?exported?by?"no
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)"default"?is?not?exported?by?"node_modules/...問題解決的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
Vue 多層組件嵌套二種實(shí)現(xiàn)方式(測(cè)試實(shí)例)
本篇文章主要介紹了Vue組件嵌套二種實(shí)現(xiàn)方式(測(cè)試實(shí)例)，具有一定的參考價(jià)值，代碼很簡(jiǎn)單，感興趣的小伙伴們可以參考一下
2017-09-09
Vue中獲取圖片高度的兩種方法
在使用Vue2開發(fā)移動(dòng)端頁面的時(shí)候,需要做一個(gè)效果,實(shí)現(xiàn)的方案是背景漸變,但是想要實(shí)現(xiàn)這個(gè)效果就必須進(jìn)行定位,我的背景高度需要在一個(gè)十分恰當(dāng)?shù)奈恢?但是我的圖片會(huì)隨著移動(dòng)端頁面的變化而發(fā)生高度的變化,為什么會(huì)變化？所以本文介紹了Vue中獲取圖片高度的方法
2024-08-08
vue微信分享到朋友圈 vue微信發(fā)送給好友
這篇文章主要為大家詳細(xì)介紹了vue微信分享到朋友圈，vue微信發(fā)送給好友功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
解決ElementUI中tooltip出現(xiàn)無法顯示的問題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無法顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
一個(gè)vue組件庫發(fā)布到npm的完整實(shí)現(xiàn)過程
工作的時(shí)候總是使用別人的npm包,然而我有時(shí)心底會(huì)好奇自己如何發(fā)布一個(gè)npm包呢,什么時(shí)候自己的包能夠被很多人喜歡并使用呢,下面這篇文章主要給大家介紹了關(guān)于一個(gè)vue組件庫發(fā)布到npm的相關(guān)資料,需要的朋友可以參考下
2022-03-03
vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)
這篇文章主要介紹了vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue中@click綁定事件點(diǎn)擊不生效的解決
這篇文章主要介紹了vue中@click綁定事件點(diǎn)擊不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧
這篇文章主要介紹了詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04