Vuejs監(jiān)聽vuex中值的變化的方法示例
比如說,例如,你有一籃子水果,每次你從籃子里添加或拿走水果 ,你想顯示有關(guān)水果數(shù)量的信息,但是你也想當(dāng)籃子中數(shù)量變化的時(shí)候收到通知。
fruit-count-component.vue
<template> <p>Fruits: {{ count }}</p> </template> <script> import basket from '../resources/fruit-basket' export default () { computed: { count () { return basket.state.fruits.length // Or return basket.getters.fruitsCount // (depends on your design decisions). } }, watch: { count (newCount, oldCount) { // Our fancy notification (2). console.log(`We have ${newCount} fruits now, yaay!`) } } } </script>
上述代碼,請(qǐng)注意,watch 對(duì)象中函數(shù)名必須和computed對(duì)象中的函數(shù)名匹配,在上面實(shí)例中名字是 count.
被監(jiān)視屬性的新值和舊值將作為參數(shù)傳遞到監(jiān)視回調(diào)(count函數(shù))中。
basket store 看起來像這樣:
fruit-basket.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const basket = new Vuex.Store({ state: { fruits: [] }, getters: { fruitsCount (state) { return state.fruits.length } } // Obvously you would need some mutations and actions, // but to make example cleaner I'll skip this part. }) export default basket
您可以在以下資源中閱讀更多內(nèi)容:
Computed properties and watchers
API docs: computed
API docs: watch
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Electron中如何使用SQLite存儲(chǔ)筆記
這篇文章主要為大家介紹了Electron中如何使用SQLite存儲(chǔ)筆記示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11vite?+?electron-builder?打包配置詳解
這篇文章主要為大家介紹了electron基于vite?+?electron-builder?打包配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09創(chuàng)建和運(yùn)行Vue.js項(xiàng)目方法demo
這篇文章主要為大家介紹了創(chuàng)建和運(yùn)行Vue.js項(xiàng)目方法demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)(附源碼)
這篇文章主要介紹了利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)的相關(guān)資料,,文中給出了詳細(xì)的介紹與示例代碼,并在文章結(jié)尾給出了完整的項(xiàng)目下載,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無限循環(huán)問題
這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無限循環(huán)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能
這篇文章主要給大家介紹了關(guān)于vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能的相關(guān)資料,在日常操作中,相信很多人在Vue怎么用插件實(shí)現(xiàn)打印功能問題上存在疑惑,需要的朋友可以參考下2023-07-07Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用,計(jì)算屬性指的是通過一系列運(yùn)算之后,最終得到一個(gè)值,watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化,從而針對(duì)數(shù)據(jù)的變化做特定的操作,本文就這兩種屬性給大家詳細(xì)講解,感興趣的朋友一起學(xué)習(xí)吧2022-11-11Vue中使用crypto-js AES對(duì)稱加密算法實(shí)現(xiàn)加密解密
?在數(shù)字加密算法中,通過可劃分為對(duì)稱加密和非對(duì)稱加密,本文主要介紹了Vue中使用crypto-js AES對(duì)稱加密算法實(shí)現(xiàn)加密解密,文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03