精华内容
下载资源
问答
  • 2019-03-04 10:28:56
    computed: {
      isFollow () {
        return this.$store.state.demo.id;  //需要监听的数据
      }
    },
    watch: {
      isFollow (newVal, oldVal) {
        //do something
      }
    },

     

    更多相关内容
  • 今天小编就为大家分享一篇vue之组件内监控$store中定义变量的变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue监听store数据变化的两种方式

    千次阅读 2020-12-10 13:52:56
    方式一 watch: { "$store.state.userInfo.Name":{ handler:function(newVal,oldVal){ console.log(newVal,oldVal); } } } ... return this.$store.... //需要监听数据 } }, watch: { isEdit(newVal, oldVal)

    方式一

    watch: {
      "$store.state.userInfo.Name":{
        handler:function(newVal,oldVal){
          console.log(newVal,oldVal);
        }
      }
    }
    

    方式二

    computed: {
      isEdit () {
        return this.$store.state.userInfo.Name;  //需要监听的数据
      }
    },
    watch: {
      isEdit(newVal, oldVal) {
        console.log(newVal,oldVal);
      }
    },
    

    区别

    • 区别一:第二种方式是先通过计算属性时刻监测store的数据变化,从而触发isEdit的监听函数,明显需要多一步
    • 区别二:如果监听store的数据是一个对象,第一种方式只需要加上深度监听,也可以实现数据的变化监听,而第二种方式却无法监听到store的对象数据变化,例如

    第一种方式

    watch: {
      //此时我监听的是对象,当$store.state.userInfo.Name发生修改时,此时需要深度监听才能监听到数据变化
      "$store.state.userInfo":{
        deep:true,//深度监听设置为 true
        handler:function(newVal,oldVal){
          console.log("数据发生变化啦"); //修改数据时,能看到输出结果
          console.log(newVal,oldVal);
        }
      }
    }
    

    第二种方式

    computed: {
      isEdit () {
        return this.$store.state.userInfo;  //需要监听的数据
      },
    },
    watch: {
      isEdit(newVal, oldVal) {
        console.log("数据发生变化啦"); //修改数据时,看不到该输出结果,因为无法监听到数据的变化
        console.log(newVal,oldVal);
      }
    },
    
    展开全文
  • vue监听store中的数据

    千次阅读 2021-08-12 11:06:57
    //插入需要在仓库数据变化时做的逻辑处理 } } 数组对象 computed:{ groupFirst(){ return this.$store.state.group[0].id; } }, watch: { groupFirst: { handler(newVal, oldVal) {

    非数组 对象

    computed:{
    	haha () {
    		return this.$store.state.msg
    	}
    },
    watch:{
    	haha:function (newVal, oldVal) {
    		//插入需要在仓库数据变化时做的逻辑处理
    	}
    }
    

    数组对象

    computed:{
    		groupFirst(){
    				return this.$store.state.group[0].id;
    			}
    },
    watch: {
    	groupFirst: {
    		handler(newVal, oldVal) {
    			this.appGroup = newVal;
    		},
    		deep: true
    	}
    },
    
    展开全文
  • 首先建立store: 重点是: 然后是存值: 一定带上模块名称(permission)。然后是使用computed计算属性取值: 使用深度监听新值变化: 完毕,这样能解决绝大部分问题。

    首先建立store:

    import router, { rootRoute, exceptionRoutes, filterAsyncRoutes } from '@/routes'
    import asyncRoutes from '@/routes/asyncRoutes'
    import config from '@/utils/config'
    import { length } from '@/utils'
    import request from '@/api'
    
    export default {
      namespaced: true,
      state: {
        messageList:[],//消息列表
      },
      mutations: {
        //聊天消息储存
        SET_MESSAGELIST:(state, info)=>{
          let data = Object.assign([], state.messageList ,info)
          state.messageList = data
        },
      },
      actions: {
        
        },
        // 同步缓存页面
        AsyncIncludes ({ commit, state }, data) {
          commit('SET_INCLUDES', data)
        },
        // 新增缓存页面
        AddIncludes ({ commit, state }, path) {
          let includes = state.includes
          if (includes.indexOf(path) < 0) {
            includes.push(path)
          }
          commit('SET_INCLUDES', includes)
        },
        // 删除缓存页面
        DelIncludes ({ commit, state }, path) {
          let includes = state.includes.filter(i => i !== path)
          commit('SET_INCLUDES', includes)
        },
        // 退出
        Logout ({ commit }) {
          commit('SET_OUT')
        }
      },
      getters: {
        includes: state => state.includes,
        get_CustomerList: state => state.customerList,
        get_ExpertList: state => state.expertList,
      }
    }
    

    重点是:

    SET_MESSAGELIST:(state, info)=>{
          let data = Object.assign([], state.messageList ,info)
          state.messageList = data
        }

    然后是存值:

    hat.$store.commit('permission/SET_MESSAGELIST', that.conversationList)

    一定带上模块名称(permission)。

    然后是使用computed计算属性取值:

     computed: {
    
            cuserList() {
    
                return this.$store.state.permission.messageList;
    
            },
    
        },

    使用深度监听新值变化:

    watch:{     //监听value的变化,进行相应的操做便可
        fuid: function(a,b){     //a是value的新值,b是旧值
          this.uid = this.fuid;
          this.chatList =[]
          this.getChatList();
        },
        cuserList: {
            handler(nval, oval) {
              debugger
              if(nval.length>0){
                  this.userList.forEach(item=>{
                    nval.forEach(item2=>{
                      if(item.uid==item2.send_uid && this.uid ==item2.receive_uid){
                       item.unreadCount = item.unreadCount+1;
                       item.msg_type = item2.msg_type;
                       item.msg_content = item2.msg_content;
                      }
                      if(item.uid==item2.send_uid && this.uid ==item2.receive_uid){
                       item.unreadCount = item.unreadCount+1;
                       item.msg_type = item2.msg_type;
                       item.msg_content = item2.msg_content;
                      }
                    })
                  })
                  console.log(this.userList)
              }
            },
            deep: true, // 深度监听
            immediate: true,//立即执行
        },
      },

    完毕,这样能解决绝大部分问题。

    展开全文
  • 监听store中的数值变化,需要用到计算属性,然后watch调用resize方法 computed: { data() { //左侧菜单状态发生变化 return this.$store.state.app.sidebar.opened } }, watch: { data(n, m) { //重置宽高 ...
  • '$store.state.viedoUrl': { deep: true, //深度监听 handler(newValue, oldValue) { // console.log(newValue, oldValue, '视频组件赋值') this.playerOptions.sources[0].src = newValue }, }, },
  • vuex的state用来放数据,我就把数组放在了vuex中,然后设置了修改的函数。最终store.js中的代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { messArray:[] } const ...
  • store.state中的对象属性发生改变,引用state的组件中却监听不到变化,深度监听也不起作用,如下代码: // state.js noticeParams: [ { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null}, { CODE...
  • vue3 监听vuex里的数据变化

    千次阅读 2022-01-17 17:26:24
    } from 'vue'; const getShowTask = computed(()=>{ //返回的是ref对象 return store.state.监听的字段; }) watch(getShowTask, (newVal, oldVal) => { console.log('newVal, oldVal', newVal, oldVal) }...
  • Vue页面监听数据变化

    千次阅读 2020-07-19 15:49:43
    某个页面需要根据路由query查询参变化执行对应的操作,放在生命周期钩子函数里面都不太合适,因为生命周期钩子函数是针对组件的不是针对页面的,所以需要通过watch监听路由query查询参的变化,代码如下: ...
  • Vue页面中监听Vuex数据变化 computed: { listenData() { return this.$store.state.user.data } }, watch: { listenData(newVal, oldVal) { // 此处处理逻辑 this.isWork = this.$store.state.user.data }...
  • 文章目录获取响应式数据应用注意点监听数据变化watchEffectwatch应用判断转换unreftoReftoRefs应用 获取响应式数据 API 传入 返回 备注 reactive plain-object 对象代理 深度代理对象中的所有成员 ...
  • vue监听vuex的store值的变化

    千次阅读 2019-05-20 19:38:41
    直接上代码 computed: { getStoreItem () { return this.$store.state.test } }, watch: { getStoreItem () { console.log(this.$store.state.test,'asfas fas fas') ...
  • watch 实现监听数据改变 使用方法 watch:{ data (n, m) { n: 变更后的数据 m:变更前的数据 } } 以上方法 只有在数据发生改变的时候 才能监听到 这个时候 提供了参数immediate 立即执行监听内的函数 ...
  • vue 监听store中的数值

    千次阅读 2018-09-20 14:30:00
    computed: { isFollow () { return this.$store.state.demo.id; //需要监听数据 } }, watch: { isFollow (newVal, oldVal) { //do something } }, 转载于:https://www.cnblogs.com/Mr-Rsha...
  • 今天小编就为大家分享一篇解决Vue2.0 watch对象属性变化监听不到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 业务场景重现 现在我的App.vue里面有一个头部的公共...然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) expor
  • 有个项目中用了vue,然后去监听对象,发现newvalue和oldvalue 值是一样的,没有变化。 var Vm = new Vue({ el: '#app', data: { fp: { zzsfp: "", sl: "", fzzsfp: "", }, zit: false },
  • VUE watch监听VUEX里的数据变化

    千次阅读 2022-01-12 11:05:01
    computed:{ listenfooterInfo() {...首先用计算属性将要监听数据赋值在listenfooterInfo上 watch: { listenfooterInfo: { handler(new,old) { //特别注意,不能用箭头函数,箭头函数,this指向全局 this.c...
  • 刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage是...
  • 解决思路:1、子路由组件监听URL变化a、created函数中:created: function () {var self = thisself.fetchData()this.$store.state.count = 0 //在中央状态管理区中添加一个count值来标识是否重新加载,当页面每次...
  • 今天小编就为大家分享一篇vuex提交state&&实时监听state数据的改变方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue3使用computed和watch来监听数据变化

    千次阅读 2021-12-15 13:33:37
    import { reactive,toRefs,computed,watch } from 'vue'; import { useStore } from 'vuex'; export default { setup(){ //定义vuex方法 const store = useStore(); //初始化 相当于vue2的data const state = ...
  • vue组件页面里监听vuex里的数据变化

    千次阅读 2021-10-12 10:42:14
    vuex里的state数据改变,想在vue组件也能实时监听变化的值: 方法: 在想要拿vuex数据vue组件页面里用计算属性+侦听属性 步骤: 1.在这一步我犯了基本功错误,就是我写的计算属性 result1是不能在data属性里存在...
  • vue监听页面大小变化重新刷新布局

    千次阅读 2020-12-23 12:01:45
    #=============================更新 2020-07-27 start==================监听页面大小变化,可以在main.js文件中使用window.addEventListener方法进行监听处理。例如:监听页面大小变化,进行字体处理function ...
  • Vue中使用watch监听Vuex中的数据变化

    千次阅读 2022-05-16 11:10:52
    使用computed和watch监听vuex数据变化 1.conputed从Vuex中获取需要监听的对象,赋值给Obj; 2.watch监听Obj的变化; 代码如下: export default{ component:{}, data(){ return{} }, computed:{ Obj(){...
  • vue 如何监听localStorage内的数据变化

    千次阅读 2022-01-11 17:37:04
    解决方式:我们在往localStorage 内设置值的时候,同时也往store内设置一个,这样我们监听store内的值变化就可以实现了实时监听。 watch:{ '$store.getters.lang': function(newlang){ // 业务代码 } } vue ...
  • Vue——监听vuex数据

    2022-05-17 22:28:54
    store/index.js state{ drawerStatus: true, ...Dashboard.vue data() { return { drawer: true, }; }, watch: { "$store.state.drawerStatus"() { this.drawer = this.$store.state.drawerStatus; } }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,683
精华内容 5,473
关键字:

vue监听store数据变化

友情链接: deflate-decoder.zip