解读vue页面监听store值改变问题

Odetta ·
更新时间:2024-11-01
· 433 次阅读

目录

vue页面监听store值改变

vue监听store.state对象变化不起作用

vue页面监听store值改变

首先建立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.state对象变化不起作用

store.state中的对象属性发生改变,引用state的组件中却监听不到变化,深度监听也不起作用,如下代码:

// state.js noticeParams: [     { CODE: null, NoticeType: null},     { CODE: null, NoticeType: null},     { CODE: null, NoticeType: null}   ] // 所引用组件 export default {   methods: {     profileJump(path, tab) {       this.$router.push({ path: path, query: { tab: tab } });     }   },   computed: {     ...mapState(['noticeParams'])   },   watch: {     noticeParams(val){       console.log('HomeHeader=====>', val);     }   } }; // 重新赋值 computed: {     ...mapState(['noticeParams'])   }, methods:{     fn(){         // 省略了一些操作         this.$store.commit('setNoticeParams', this.noticeParams)     } }  // mutations里的方法  setNoticeParams(state, data) {      // 问题就出现在此处     state.noticeParams = data   }

由于重新赋值的代码中里引用了初始 state.noticeParams,而mutations的方法中将改变后的state.noticeParams又重新赋值给state.noticeParams,此时state.noticeParams里的属性值发生了改变但引用并未发生变化,所以监听没起作用,解决方法就是创建新的数组

setNoticeParams(state, data) {     let arr = Object.assign([], state.noticeParams, data);     state.noticeParams = arr     // 创建一个空数组,将初始state.noticeParams与改变后的state.noticeParams==》data合并,最后赋值给state.noticeParams   }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持软件开发网。



VUE

需要 登录 后方可回复, 如果你还没有账号请 注册新账号