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

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

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

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

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

<script>
import { mapGetters } from 'vuex'
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中如何監聽vuex中的資料變化的詳細內容，更多請關注php中文網其它相關文章！