• 技术文章 >web前端 >Vue.js

    vue中如何监听vuex中的数据变化

    青灯夜游青灯夜游2021-09-06 14:16:46原创171

    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等非vue文件中监听vuex数据的变化方式。

    就如文中提到的缺点,当数据量过大时,写多次监听闲的不友好,可以考虑订阅mutation的方式管理大量数据。

    相关推荐:《vue.js教程

    以上就是vue中如何监听vuex中的数据变化的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue vuex 数据变化
    上一篇:vue的router和route区别是什么 下一篇:vuejs如何设置父子通信
    线上培训班

    相关文章推荐

    • vuex刷新页面数据丢失怎么解决• Vuex中Mutations怎么理解?怎么用?• vuex使用场景是什么• 什么是Vuex?Vuex 4初学者指南• vuex的五个核心属性是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网