vue的vuex监听

作者: 坏丶毛病 | 来源:发表于2020-12-14 10:21 被阅读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订阅
附上官网的api文档参考:vuex的api参考

好了,如有问题,请指出,接收批评。

相关文章

  • vue的vuex监听

    vue如何在非vue文件中监听vuex数据的变更? 通常我们在vue文件中监听数据的变更,尤其是vuex中数据的变...

  • vue组件传值&vuex

    vue技术分享 目录 vue组件之间的通信 vue中数据监听watch的使用 vuex状态管理 vue-aweso...

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

    1.在vue文件中监听vuex的数据变化 首先通过计算属性来获取vuex中的数据再通过watch来监听计算属性中的...

  • 2019-06-07

    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

  • vue的vuex订阅

    vue本身内置了watch函数,可以很方便的用来监听数据的变更,包括vuex数据的变更. 但是,这都是基于vue文...

  • 2018-09-06

    import Vue from 'vue'import Vuex from 'vuex' Vue.use(Vuex...

  • 计划

    优化大屏检查报告页面vue登录功能vuex监听git config --global user.name "liL...

  • vue多页面应用时vuex数据不同步的问题

    vue生成多个页面时,vuex不同步,如果有监听vuex的值的逻辑的时候就不行了,我们可以将值存在本地存储中,通过...

  • 创建store改变VUEX

    import Vue from "vue"; import Vuex from "vuex"; Vue.use(V...

  • Vuex 通俗版教程告诉你Vuex怎么用

    import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(V...

网友评论

    本文标题:vue的vuex监听

    本文链接:https://www.haomeiwen.com/subject/rhxvgktx.html