第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

37、vuex初探(五)

標(biāo)簽:
Html5 Vue.js vuex

前言:国庆归来,我们继续。
这章我们讲mapMutationsmapGetters这两个辅助函数,然后我们vuex基本的概念和使用方法到此就讲完了。
GitHub:https://github.com/Ewall1106/mall

1、mapMutations

(1)还是来看看这张图:

vuex状态管理机制

(2)通过这张图我们知道了vuex状态管理机制的一个大体步骤,但是,前面我有一点没提到,那就是在组件中,可以通过commit方法跳过1步骤直接提交mutations,如图:

组件直接使用commit方法提交mutations

(3)而mapMutations这种辅助函数不过就是为了简化操作:

使用mapMutations辅助函数

2、Getter

(1)说mapGetters这个辅助函数之前,我们还需要将store仓库再拆分一个getters.js文件出来,那么,这个文件是干嘛的呢?

有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

(2)具体到我们的代码例子中,让我们把简单的问题复杂化,我们不直接获取state中的city值了,我们在getter.js中获取return返回state中的city值。

中返回中的值。

(3)然后我们还需要在index.js中注册

注册getters

(4)然后我们就可以访问到return返回的值了

Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值。

通过store.getters 对象

3、mapGetters

到这里快结尾了,你应该立刻明白这个辅助函数不过就是简化而已,不过这里有几点要注意一下,此辅助函数是个计算属性,所以:

  • mapMutations放到methods下;
  • mapActions放到methods下;
  • mapGetters放到computed下。

使用mapGetters辅助函数

4、小结

vuex的整个流程和一系列的辅助函数的使用到处就讲完了,大家根据自己的业务需求相应处理;然后就是官网还有更高级的用法,大家也可以自行琢磨。

點(diǎn)擊查看更多內(nèi)容
1人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消