您好,登錄后才能下訂單哦!
本篇文章為大家展示了vuex中mapState、mapGetters、mapMutations、mapActions的作用是什么,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(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', //這個(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。。。
界面效果:
上述內(nèi)容就是vuex中mapState、mapGetters、mapMutations、mapActions的作用是什么,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。