watch 监听vuex参数变化 - CSDN
精华内容
参与话题
  • Vuex无法观察到值变化的解决办法

    千次阅读 2017-07-26 18:12:50
    在跨越主路由视图时,由于Vuex的状态值一直存储在内存中,所以在组件视图重新载入时,可能会出现组件无法检测到状态值的变化,从而导致业务逻辑出现错误。假定通用头部组件有一个全局任务状态值,其他的组件都要根据...

    在跨越主路由视图时,由于Vuex的状态值一直存储在内存中,所以在组件视图重新载入时,可能会出现组件无法检测到状态值的变化,从而导致业务逻辑出现错误。

    假定通用头部组件有一个全局任务状态值,其他的组件都要根据此任务值进行更新,更可能出现的情况是,任务状态值是异步加载完成的,于是需要如此编写业务逻辑:

    computed : {
        task () {
            return this.$store.state.task
        }    
    },
    
    watch : {
        task : {
             deep: true,
             handler (val) {
                 // 由于是异步载入,所以只能在状态值的变化时执行渲染操作
                 // 绝不可在mounted中执行render方法
                 this.render(val)
             }
        }    
    }

    但是,由于上面的原因,第一次载入视图时,因为Vuex的状态值还没有存储在内存中,所以渲染正常。发生了视图切换后,虽然也重新载入了任务状态值,但由于task并没有发生变化,所以render方法不会被调用,于是组件无法完成渲染过程。

    解决的办法很简单,强行触发task值发生改变,方法是定义一个时间戳,如果觉得在时间戳的粒度仍然太粗,还可以组合使用随机数,如下:

    watch: {
        taskId : {
             handler (val) {
                 // 从v-model获取到的新值
                 let taskId = this.taskId
                 // 提交新值变化
                 this.$store.commit(TASK_ID, 
                 {
                      id : taskId,
                      //    添加时间戳
                      time : Date.now().valueOf(),
                      //    添加随机数
                      random : Math.random()
                 })
             }
        }
    }

    经过上面的处理,只要发生taskId的赋值现象,那么一定会触发Vuex的状态变化,所以每次组件载入时或taskId的值发生变化时,render方法就一定会被执行。

    结论

    为了满足Vuex的值传递要求,尤其是需要强行刷新Vuex的缓存时,添加时间戳与随机数不失为一种好的解决方案。

    展开全文
  • 监听this.$store.state.app.language的值,注意写在method外面 watch: { '$store.state.app.language': function () { //你需要执行的代码 } },

    如监听this.$store.state.app.language的值,注意写在method外面

     watch: {
        '$store.state.app.language': function () {
          //你需要执行的代码
        }
      },

     

    展开全文
  • 需求: 组件A为公共组件,负责定时查询信息通知,并通过模态...这就需要监听组件A中的事件,当用户打开通知模态点击接受时,获取组件A中所选择用户的id并触发组件B中的方法。 图示: 1.红框中为菜单组件A中的消息通...

    需求:

    组件A为公共组件,负责定时查询信息通知,并通过模态展示;
    组件B为业务组件,负责项目中报告的编辑审核等业务流程;
    用户打开组件A中的信息通知模态时,可以选择接受或拒绝处理相关通知,接受时直接打开组件B进行业务,拒绝时只刷新通知不进行其他操作。这就需要监听组件A中的事件,当用户打开通知模态点击接受时,获取组件A中所选择用户的id并触发组件B中的方法。

    图示:

    1.红框中为菜单组件A中的消息通知,其它部分为组件B
    公共组件A中的消息通知
    2.点击消息通知时的操作模态
    组件A中的操作模态

    解决办法:

    由于两个组件间不存在父子关系,且业务中已经使用到vuex,因此,决定采用vuex作为中介。一开始设想用户点击组件A中的通知时,通知参数noticeId通过vuex在组件间进行传递,在组件B中通过watch监听noticeId变化来调用组件中的事件。后来考虑到当用户点击同一通知时传递的参数一致,会导致组件B中的watch无法监听到变化进而无法调用事件,因此在vuex中增加布尔值用于改变状态,通过监听变化的布尔值来获取noticeId。
    1.vuex

    state: {
        noticeId:'',// 存储组件A中通知用户的ID
        isNotice:false,// 用于修改监听状态,避免点击同一id时组件B中的watch失效
      },
      mutations: {
        GET_NOTICEID:(state,data) => {
          state.isNotice = !state.isNotice;// 每次调用时更新状态
          state.noticeId = data;
        }
      }
    

    2.组件A中的主业务:

    // 接受按钮,id为通知中的对应用户id
    define(id) {
    		// 判断是否勾选立即书写
            if(this.isWrite) {
            	// 判断路由,处于组件B中时通过commit提交参数到vuex中,'work/radiation'为组件B的路由
              if(this.$route.path.indexOf('work/radiation') !== -1) {
                this.$store.commit('GET_NOTICEID',id);
              } else {
                //  处于其他组件时携带参数跳转到组件B页面
                this.$router.push('/work/radiation?id=' + id);
              }
            } else {
             	//仅调用接受接口并刷新数据...
            }
          },
    

    3.组件B中业务:

    // 获取vuex中的isNotice布尔值,用于监听。注:isNotice每次调用都会改变,见1.
    computed: {
          isNotice() {
            return this.$store.state.user.isNotice
          }
        },
    watch:{
          isNotice(val,oldVal) {
            console.log(this.$store.getters.noticeId);// 通过vuex传递来的组件A中的参数
            // 触发组件B中的事件...
          }
        }
    
    展开全文
  • Vuejs 监听 vuex 中值的变化

    千次阅读 2019-03-21 00:29:24
    比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知。 fruit-count-component.vue <template> <p>Fruits: {{ count }}...
        

    比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知。

    fruit-count-component.vue

        <template>
          <p>Fruits: {{ count }}</p>
        </template>
        
        <script>
        import basket from '../resources/fruit-basket'
        
        export default () {
          computed: {
            count () {
              return basket.state.fruits.length
              // Or return basket.getters.fruitsCount
              // (depends on your design decisions).
            }
          },
          watch: {
            count (newCount, oldCount) {
              // Our fancy notification (2).
              console.log(`We have ${newCount} fruits now, yaay!`)
            }
          }
        }
    </script>

    上述代码,请注意,watch 对象中函数名必须和computed对象中的函数名匹配,在上面实例中名字是 count.

    被监视属性的新值和旧值将作为参数传递到监视回调(count函数)中。


    basket store 看起来像这样:

    fruit-basket.js

        import Vue from 'vue'
        import Vuex from 'vuex'
        
        Vue.use(Vuex)
        
        const basket = new Vuex.Store({
          state: {
            fruits: []
          },
          getters: {
            fruitsCount (state) {
              return state.fruits.length
            }
          }
          // Obvously you would need some mutations and actions,
          // but to make example cleaner I'll skip this part.
        })
        
        export default basket

    您可以在以下资源中阅读更多内容:

    Computed properties and watchers
    API docs: computed
    API docs: watch

    展开全文
  • 假如我们有一个请求需要在mounted生命周期里面发起,然后拿到的数据渲染到页面然后发起请求的一个参数是需要从vuex里面获取的我们假设这个参数是token,这个token是要用户进行授权然后我们才能拿到 我们可以写成这...
  • 为什么要用 vuex? 在使用 Vue 进行组件化开发时,组件通信是一个十分重要的部分。在 Vue 中,父子组件的关系可以总结为 父子组件通信:父组件通过 props 向下传递数据给子组件 子父组件通信:子组件通过 events...
  • 分析:vue无法监听localstorage的变化。localstorage主要用于不同页面间传值,vue适合组件间传值。对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据(vuex在页面刷新的时候存储的值会丢失,...
  • 简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题。先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VALUE__ = JSON.parse(JSON....
  • 正常情况下,更多推荐的是利用vuex来进行父子组件间的状态变化监听,毕竟vue是支持单向数据流的,违背了这个特性,一是不好维护,二是耦合性降低了,但是否没有了vuex,子组件就难以主动根据父组件的变化变化呢?...
  • Vuex state 中数据的实时监控与响应

    千次阅读 2017-07-24 10:18:43
    computed:{  getLanguage(){  return this.$store.state.language;  }  },  watch:{  getLanguage(val){  this.user = this.$t('user');  this.pas = this.$t
  • vue 监听路由变化

    万次阅读 2018-05-15 10:00:03
    方法一:通过 watch123456// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); }},或12345678910// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(val, ...
  • //监听vuex中userNumber的变化 '$store.state.userNumber'(val){ //变化之后根据自己项目需求写自身的逻辑代码,下面只是示例 if( !this.isLogin){ this.dialogVisibleLogin=val } }, //监听路由变化的...
  • Vue 3.0 项目初始化 Vue 3.0 项目初始化过程和 Vue 2.0 类似,具体步骤如下: Vue 项目初始化 第一步,安装 vue-cli: npm install -g @vue/cli ...第二步,初始化 vue 项目: ...输入命令后,会出现命令行交互窗口,...
  • 监听vue全局状态的值(附demo)

    千次阅读 2019-05-25 10:17:16
    监听vue全局状态的值背景vant-ui组件链接原理交互效果 背景 我是根据vant-ui组件库中有个tabbar组件中,有个属性v-model=‘active’中,要改变他的值,也就是跳转页面,除了点击tabbar按钮,也可以改变全局状态中的...
  • 场景: 需要设计一个页面 左侧为一棵树(接口分组) 右侧为一个列表(接口列表) ...树为一个vue、列表为一个vue 上代码 接口分组树vue为 views/appium-tree1/index.vue 接口列表vue为 views/appium-list/index.vue ...
  • 二:vuex 先看官方文档 Vuex 官方文档:https://vuex.vuejs.org/zh-cn/ vuex 是一个专为vue应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式...
  • 业务需求为:在组件一中通过事件修改vuex中的该oid,当该oid有变化时即触发组件二中的axios请求(该id作为参数)。我在项目中vuex是分了两个模块a和b。再多说一句哈哈,用了vuex,路由传参都可以被代替了,还算是...
  • watch主要作用是监听数据的变化 假如我们的购物车的商品信息在vuex中,属性名是:carshopping 那我们监听的时候就要在组件中用到watch了 注意:watch在Vue中和name、data这些属性同级。 watch有两个参数,分别是...
  • vue的vuex监听

    2020-08-24 11:42:50
    vue如何在非vue文件中监听vuex数据的变更? 通常我们在vue文件中监听数据的变更,尤其是vuex中数据的变更非常方便,通过watch函数可以很便捷的拿到数据变更前后的值,并作出相应的处理。 但是,当我们需要在诸如js等...
  • 更新修正------ 在工作中进行Vue框架使用中,总是会遇见数组不触发更新问题,因此在原来的基础上添加了官网上的代码和评论补充的代码。 官网中提到两种情况(数组更新无法触发): # 由于 JavaScript 的限制,...
1 2 3 4 5 ... 20
收藏数 2,191
精华内容 876
热门标签
关键字:

watch 监听vuex参数变化