這篇文章將為大家詳細(xì)講解有關(guān)vue中怎么監(jiān)聽vuex中的數(shù)據(jù)變化，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對(duì)廣告制作等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站營(yíng)銷優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

vue監(jiān)聽vuex中數(shù)據(jù)變化的方法：可以先通過計(jì)算屬性computed來獲取vuex中的數(shù)據(jù)；然后通過watch來監(jiān)聽計(jì)算屬性中值的變化，獲取數(shù)據(jù)變更前后的值，并作出相應(yīng)的處理。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

1.在vue文件中監(jiān)聽vuex的數(shù)據(jù)變化

首先通過計(jì)算屬性來獲取vuex中的數(shù)據(jù)
再通過watch來監(jiān)聽計(jì)算屬性中的值來獲取變化

2.vue如何在非vue文件中監(jiān)聽vuex數(shù)據(jù)的變更？

通常我們?cè)趘ue文件中監(jiān)聽數(shù)據(jù)的變更，尤其是vuex中數(shù)據(jù)的變更非常方便，通過watch函數(shù)可以很便捷的拿到數(shù)據(jù)變更前后的值，并作出相應(yīng)的處理。

但是，當(dāng)我們需要在諸如js等文件中監(jiān)聽到數(shù)據(jù)的變更就會(huì)很不容易，所幸，vue官網(wǎng)提供了解決思路

watch(fn: Function, callback: Function, options?: Object): Function
vuex的實(shí)例方法，接收兩個(gè)參數(shù)：
第一個(gè)參數(shù)為fn，響應(yīng)式地偵聽 fn 的返回值，當(dāng)值改變時(shí)調(diào)用回調(diào)函數(shù)。fn 接收 store 的 state 作為第一個(gè)參數(shù)，其 getter 作為第二個(gè)參數(shù)；
第二個(gè)參數(shù)為一個(gè)可選的對(duì)象參數(shù)表示 ，類似于vue的watch的回調(diào)函數(shù)，表示新舊值。
當(dāng)我們不想監(jiān)聽時(shí)，可以通過定義變量接收該方法的返回值函數(shù)，調(diào)用該函數(shù)即可停止監(jiān)聽。

優(yōu)點(diǎn)：我們可以監(jiān)聽我們某個(gè)特定需要的值，并非常方便的類似vue文件中那樣拿到新舊變化值
弊端：當(dāng)我們需要知道很多的值的變更情況時(shí)就得寫大量的監(jiān)聽方法（可以考慮封裝成方法或類）
用法示例：

/* eslint-disable */
import store from "../store/index";

const watchFun = store.watch(
    state => state.pathName,
    (newValue, oldValue) => {
        console.log("search string is changing");
        console.log("rd: newValue", newValue);
        console.log("rd: oldValue", oldValue);
    }
);

setTimeout(() => {
    watchFun();
}, 10000);

• 在相應(yīng)的js文件引入store

• 調(diào)用store的watch實(shí)例方法，第一個(gè)函數(shù)參數(shù)返回一個(gè)需要監(jiān)聽的state中的值（比如我想監(jiān)聽vuex中的pathName的變化情況，就返回該值）

• 第二個(gè)參數(shù)同vue的watch，接收2個(gè)參數(shù)代表新舊值

• 通過變量watchFun接收watch的返回值，調(diào)用該方法會(huì)停止監(jiān)聽

如上，就是如何在js等非vue文件中監(jiān)聽vuex數(shù)據(jù)的變化方式。

就如文中提到的缺點(diǎn)，當(dāng)數(shù)據(jù)量過大時(shí)，寫多次監(jiān)聽閑的不友好，可以考慮訂閱mutation的方式管理大量數(shù)據(jù)。

關(guān)于“vue中怎么監(jiān)聽vuex中的數(shù)據(jù)變化”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。