Vuejs監(jiān)聽vuex中值的變化的方法示例
更新時間：2018年12月02日 14:37:33 作者：任重道遠(yuǎn)
這篇文章主要介紹了Vuejs監(jiān)聽vuex中值的變化的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
比如說,例如,你有一籃子水果,每次你從籃子里添加或拿走水果 ,你想顯示有關(guān)水果數(shù)量的信息,但是你也想當(dāng)籃子中數(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>
上述代碼，請注意，watch 對象中函數(shù)名必須和computed對象中的函數(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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Electron中如何使用SQLite存儲筆記示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時候用哪個屬性，要好好區(qū)分一下才能做到正確的運用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下2018-03-03
vite?+?electron-builder?打包配置詳解
這篇文章主要為大家介紹了electron基于vite?+?electron-builder?打包配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了創(chuàng)建和運行Vue.js項目方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)（附源碼）
這篇文章主要介紹了利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)的相關(guān)資料,，文中給出了詳細(xì)的介紹與示例代碼，并在文章結(jié)尾給出了完整的項目下載，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題
這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3使用vue3-print-nb實現(xiàn)區(qū)域打印功能
這篇文章主要給大家介紹了關(guān)于vue3使用vue3-print-nb實現(xiàn)區(qū)域打印功能的相關(guān)資料,在日常操作中,相信很多人在Vue怎么用插件實現(xiàn)打印功能問題上存在疑惑,需要的朋友可以參考下2023-07-07
Vue計算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計算屬性與監(jiān)視(偵聽)屬性的使用,計算屬性指的是通過一系列運算之后，最終得到一個值，watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作，本文就這兩種屬性給大家詳細(xì)講解，感興趣的朋友一起學(xué)習(xí)吧2022-11-11
這篇文章主要介紹了vue項目中axios的封裝請求，axios?是一個輕量的HTTP客戶端，它基于?XMLHttpRequest?服務(wù)來執(zhí)行?HTTP?請求，支持豐富的配置，下文更多詳細(xì)資料,需要的朋友可以參考一下2022-03-03
Vue中使用crypto-js AES對稱加密算法實現(xiàn)加密解密
?在數(shù)字加密算法中，通過可劃分為對稱加密和非對稱加密，本文主要介紹了Vue中使用crypto-js AES對稱加密算法實現(xiàn)加密解密，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03