vue监听vuex中数据变化的方法：可以先通过计算属性computed来获取vuex中的数据；然后通过watch来监听计算属性中值的变化，获取数据变更前后的值，并作出相应的处理。

1、在vue文件中监听vuex的数据变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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文件中那样拿到新旧变化值
弊端：当我们需要知道很多的值的变更情况时就得写大量的监听方法（可以考虑封装成方法或类）
用法示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 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的返回值，调用该方法会停止监听