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

通常我們在vue文件中監(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è)可選的對象參數(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);

1. 在相應(yīng)的js文件引入store
2. 調(diào)用store的watch實(shí)例方法，第一個(gè)函數(shù)參數(shù)返回一個(gè)需要監(jiān)聽的state中的值（比如我想監(jiān)聽vuex中的pathName的變化情況，就返回該值）
3. 第二個(gè)參數(shù)同vue的watch，接收2個(gè)參數(shù)代表新舊值
4. 通過變量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ù)。

參考文章如下：vue的vuex訂閱
附上官網(wǎng)的api文檔參考：vuex的api參考

好了，如有問題，請指出，接收批評。