vue中如何監聽vuex中的資料變化

vue監聽vuex中資料變化的方法：可以先透過計算屬性computed來取得vuex中的資料；然後透過watch來監聽計算屬性中值的變化，取得資料變更前後的值，並作出對應的處理。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

1.在vue檔案中監聽vuex的資料變化

#首先透過計算屬性來取得vuex中的資料
再透過watch來監聽計算屬性中的值來取得變化

<script>
import { mapGetters } from &#39;vuex&#39;
export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(["mapboxMap"]),
    mapboxMap1() {
      // return this.$store.state.mapbox.map;
      return this.mapboxMap;
    }
  },
  watch: {
    mapboxMap1(newData, oldData) {
     
    }
  },
}
</script>

2.vue如何在非vue檔案中監聽vuex資料的變更？

通常我們在vue檔案中監聽資料的變更，尤其是vuex中資料的變更非常方便，透過watch函數可以很便捷的拿到資料變更前後的值，並做出對應的處理。

但是，當我們需要在諸如js等文件中監聽到資料的變更就會很不容易，所幸，vue官網提供了解決思路

watch(fn: Function, callback: Function, options?: Object): Function
vuex的實例方法，接收兩個參數：
第一個參數為fn，響應式地偵聽fn 的回傳值，當值改變時呼叫回呼函數。 fn 接收 store 的 state 作為第一個參數，其 getter 作為第二個參數；
第二個參數為一個可選的物件參數表示 ，類似於vue的watch的回呼函數，表示新舊值。
當我們不想監聽時，可以透過定義變數接收該方法的回傳值函數，呼叫函數即可停止監聽。

優點：我們可以監聽我們某個特定需要的值，並且非常方便的類似vue文件中那樣拿到新舊變化值
弊端：當我們需要知道很多的值的變更情況時就得寫大量的監聽方法（可以考慮封裝成方法或類別）
用法範例：

/* 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);

• 在對應的js檔案中引入store

• ##呼叫store的watch實例方法，第一個函數參數回傳一個需要監聽的state中的值（例如我想監聽vuex中的pathName的變化情況，就回傳該值）

• 第二個參數同vue的watch，接收2個參數代表新舊值

• #透過變數watchFun接收watch的回傳值，呼叫該方法會停止監聽

如上，就是如何在js等非vue檔案中監聽vuex資料的變化方式。

就如文中提到的缺點，當資料量過大時，寫多次監聽閒的不友好，可以考慮訂閱mutation的方式管理大量資料。

相關推薦：《

vue.js教學》

以上是vue中如何監聽vuex中的資料變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！