vue的vuex监听

叁歲伎倆 2021-08-19 23:40 443阅读 0赞

# 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);

1.  在相应的js文件引入store
2.  调用store的watch实例方法，第一个函数参数返回一个需要监听的state中的值（比如我想监听vuex中的pathName的变化情况，就返回该值）
3.  第二个参数同vue的watch，接收2个参数代表新旧值
4.  通过变量watchFun接收watch的返回值，调用该方法会停止监听

如上，就是如何在js等非vue文件中监听vuex数据的变化方式。  
就如文中提到的缺点，当数据量过大时，写多次监听闲的不友好，可以考虑订阅mutation的方式管理大量数据。  
参考文章如下：[vue的vuex订阅][vue_vuex]  
附上官网的api文档参考：[vuex的api参考][vuex_api]  
好了，如有问题，请指出，接收批评。  
个人微信公众号：  
![在这里插入图片描述][20200824114246718.png_pic_center]

[vue_vuex]: https://blog.csdn.net/qq_43363884/article/details/103803779
[vuex_api]: https://vuex.vuejs.org/zh/api/#watch
[20200824114246718.png_pic_center]: /images/20210813/361637fd61c14a218884422e74d6afd0.png