精华内容
下载资源
问答
  • vue3 监听store
    千次阅读
    2021-08-12 11:06:57

    非数组 对象

    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
    	}
    },
    
    更多相关内容
  • 今天聊一聊vue页面监听store值改变

    千次阅读 2022-06-16 17:12:13
    首先建立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,//立即执行
        },
      },

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

    展开全文
  • 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);
      }
    },
    
    展开全文
  • 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) }...
    import {
    		computed,
    		watch,
    } from 'vue';
    
    const getShowTask = computed(()=>{
    	//返回的是ref对象
    	return store.state.监听的字段;
    })
    
    watch(getShowTask, (newVal, oldVal) => {
    	console.log('newVal, oldVal', newVal, oldVal)
    }, {immediate:true,deep:true});
    
    展开全文
  • vue 监听store中的数值

    千次阅读 2018-09-20 14:30:00
    computed: { ... return this.$store.state.demo.id; //需要监听的数据 } }, watch: { isFollow (newVal, oldVal) { //do something } }, 转载于:https://www.cnblogs.com/Mr-Rsha...
  • store.state中的对象属性发生改变,引用state的组件中却监听不到变化,深度监听也不起作用,如下代码: // state.js noticeParams: [ { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null}, { CODE...
  • 今天小编就为大家分享一篇vue之组件内监控$store中定义变量的变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 业务场景重现 现在我的App.vue里面有一个头部的公共...然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) expor
  • vue 监听store中的数值变化

    万次阅读 2019-03-04 10:28:56
    computed: { isFollow () { return this.$store.state.demo.id; //需要监听的数据 } }, watch: { isFollow (newVal, oldVal) { //do something } },
  • 我就废话不多说了,大家还是直接看代码吧~ export default { data() { return { item: '' } }, watch: { item(now, before){ let remove = before.filter(x => now.indexOf(x)...补充知识:Vuejs+Element监听-
  • Vue监听$store 中的数据的方法

    万次阅读 2019-02-21 18:01:34
    computed:{ haha(){ return this.$store.state.msg } }, watch:{ haha(){ //插入需要在仓库数据变化时做的逻辑处理 } }
  • 今天小编就为大家分享一篇vue-cli监听组件加载完成的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 监听store中的数值变化,需要用到计算属性,然后watch调用resize方法 computed: { data() { //左侧菜单状态发生变化 return this.$store.state.app.sidebar.opened } }, watch: { data(n, m) { //重置宽高 ...
  • vue3.0 监听vuex的数据

    千次阅读 2021-12-13 14:55:27
    引用watch 监听store内部的数据 总结: 监听store的内部数据。和监听页面定义的响应式数据一样 第一个参数 都要用函数的形式监听
  • watch 实现监听数据改变 使用方法 watch:{ data (n, m) { n: 变更后的数据 m:变更前的数据 } } 以上方法 只有在数据发生改变的时候 才能监听到 这个时候 提供了参数immediate 立即执行监听内的函数 ...
  • vue3 watch监听实现

    2022-07-07 21:46:17
    vue3 watch数据监听
  • 刷新页面时vue实例重新加载,...beforeunload在页面刷新时触发,可以监听这个方法,让页面在刷新前存store到sessionStorage中。 当然,在页面刷新时还要读取sessionStorage中的数据到store中,读取和储存都写在app.vue
  • 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') ...
  • 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 = ...
  • 31 vue3 Pinia监听订阅actions

    千次阅读 2022-03-15 09:27:15
    30 vue3 Pinia对state的订阅监听($subscribe)_十一月的萧邦-CSDN博客 本篇记录在vue3中如何对actions进行一个监听订阅的操作,这些操作对于在运行时跟踪错误很有用!可以帮助我们更好的发现问题,解决问题 1. ...
  • vue3使用watch监听多个值

    千次阅读 2021-12-15 13:46:20
    vue3 可以写多个watch import { reactive,toRefs,computed,watch } from 'vue'; import { useStore } from 'vuex'; export default { setup(){ //定义vuex方法 const store = useStore(); //初始化 相当于vue2的...
  • 看下(有this ,但是 vue3 是没有的,我们说过vue3的this是undefined) 与vue2 中的computed 配置功能一致。 (注意的是简写会在修改的时候警告,所以我们按照完整写法写入。)写法: 引入 computed 先看下 vue2 中深度...
  • vue3 watch
  • 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; } }
  • 监听this.$store.state.app.language的值,注意写在method外面 watch: { '$store.state.app.language': function () { //你需要执行的代码 } },
  • vue 如何监听localStorage内的数据变化

    千次阅读 2022-01-11 17:37:04
    解决方式:我们在往localStorage 内设置值的时候,同时也往store内设置一个,这样我们监听store内的值变化就可以实现了实时监听。 watch:{ '$store.getters.lang': function(newlang){ // 业务代码 } } vue ...
  • window.sessionStorage })] }) 二,在组件中修改提交数据 // 引入 import { ActionLogModule } from '@/store/modules/actionLog' // 使用 ActionLogModule.SET_ACTION_LOG('update') 三,在组件中监听这个数据的...
  • vue监听

    2020-09-17 10:04:37
    useChange(){ //同步数据, $store挂载在Vue实例上(Vue.prototype) return this.$store.getters.User; } }, //监控data中的数据变化 watch: { useChange(){ //监听 computed 的数据 console.log('%c%s','...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,495
精华内容 5,798
关键字:

vue3 监听store