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.js教程》
以上就是vue中如何监听vuex中的数据变化的详细内容,更多请关注php中文网其它相关文章!
原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/146018.html