vue中怎么監聽vuex中的數據變化

這篇文章將為大家詳細講解有關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中的數據變化”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。