解讀vue頁面監(jiān)聽store值改變問題
vue頁面監(jiān)聽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; ? ? ? ? ? }, ? ? ? },
使用深度監(jiān)聽新值變化:
watch:{ ? ? //監(jiān)聽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, // 深度監(jiān)聽 ? ? ? ? immediate: true,//立即執(zhí)行 ? ? }, ? },
完畢,這樣能解決絕大部分問題。
vue監(jiān)聽store.state對象變化不起作用
store.state中的對象屬性發(fā)生改變,引用state的組件中卻監(jiān)聽不到變化,深度監(jiān)聽也不起作用,如下代碼:
// 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) { ??? ?// 問題就出現(xiàn)在此處 ? ? state.noticeParams = data ? }
由于重新賦值的代碼中里引用了初始 state.noticeParams,而mutations的方法中將改變后的state.noticeParams又重新賦值給state.noticeParams,此時state.noticeParams里的屬性值發(fā)生了改變但引用并未發(fā)生變化,所以監(jiān)聽沒起作用,解決方法就是創(chuàng)建新的數(shù)組
setNoticeParams(state, data) { ? ? let arr = Object.assign([], state.noticeParams, data); ? ? state.noticeParams = arr ? ? // 創(chuàng)建一個空數(shù)組,將初始state.noticeParams與改變后的state.noticeParams==》data合并,最后賦值給state.noticeParams ? }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue中將el-switch值true、false改為number類型的1和0
這篇文章主要介紹了vue中將el-switch值true、false改為number類型的1和0問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面
這篇文章主要介紹了vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06Vue3響應式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對于保持頂層屬性不變而內(nèi)部屬性可變的場景非常有用,本文將詳細介紹?shallowReadonly()?的使用方法及其應用場景,具有一定的參考價值,感興趣的可以了解一下2024-09-09解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽不到問題
這篇文章主要介紹了解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽不到問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07