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

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)

 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,//立即执行     },   },

// 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   }

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