解讀vue頁(yè)面監(jiān)聽(tīng)store值改變問(wèn)題
vue頁(yè)面監(jiān)聽(tīng)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: { //聊天消息儲(chǔ)存 SET_MESSAGELIST:(state, info)=>{ let data = Object.assign([], state.messageList ,info) state.messageList = data }, }, actions: { }, // 同步緩存頁(yè)面 AsyncIncludes ({ commit, state }, data) { commit('SET_INCLUDES', data) }, // 新增緩存頁(yè)面 AddIncludes ({ commit, state }, path) { let includes = state.includes if (includes.indexOf(path) < 0) { includes.push(path) } commit('SET_INCLUDES', includes) }, // 刪除緩存頁(yè)面 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, } }
重點(diǎn)是:
SET_MESSAGELIST:(state, info)=>{ ? ? ? let data = Object.assign([], state.messageList ,info) ? ? ? state.messageList = data ? ? }
然后是存值:
hat.$store.commit('permission/SET_MESSAGELIST', that.conversationList)
一定帶上模塊名稱(permission)。
然后是使用computed計(jì)算屬性取值:
?computed: { ? ? ? ? ? cuserList() { ? ? ? ? ? ? ? return this.$store.state.permission.messageList; ? ? ? ? ? }, ? ? ? },
使用深度監(jiān)聽(tīng)新值變化:
watch:{ ? ? //監(jiān)聽(tīng)value的變化,進(jìn)行相應(yīng)的操做便可 ? ? 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)聽(tīng) ? ? ? ? immediate: true,//立即執(zhí)行 ? ? }, ? },
完畢,這樣能解決絕大部分問(wèn)題。
vue監(jiān)聽(tīng)store.state對(duì)象變化不起作用
store.state中的對(duì)象屬性發(fā)生改變,引用state的組件中卻監(jiān)聽(tīng)不到變化,深度監(jiān)聽(tīng)也不起作用,如下代碼:
// 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) { ??? ?// 問(wèn)題就出現(xiàn)在此處 ? ? state.noticeParams = data ? }
由于重新賦值的代碼中里引用了初始 state.noticeParams,而mutations的方法中將改變后的state.noticeParams又重新賦值給state.noticeParams,此時(shí)state.noticeParams里的屬性值發(fā)生了改變但引用并未發(fā)生變化,所以監(jiān)聽(tīng)沒(méi)起作用,解決方法就是創(chuàng)建新的數(shù)組
setNoticeParams(state, data) { ? ? let arr = Object.assign([], state.noticeParams, data); ? ? state.noticeParams = arr ? ? // 創(chuàng)建一個(gè)空數(shù)組,將初始state.noticeParams與改變后的state.noticeParams==》data合并,最后賦值給state.noticeParams ? }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue 解除鼠標(biāo)的監(jiān)聽(tīng)事件的方法
這篇文章主要介紹了vue 解除鼠標(biāo)的監(jiān)聽(tīng)事件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11vue中將el-switch值true、false改為number類型的1和0
這篇文章主要介紹了vue中將el-switch值true、false改為number類型的1和0問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue-cli多頁(yè)面應(yīng)用實(shí)踐之實(shí)現(xiàn)組件預(yù)覽項(xiàng)目
在最近的項(xiàng)目中遇到了一個(gè)需求,找了相關(guān)資料后終于實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于vue-cli多頁(yè)面應(yīng)用實(shí)踐之實(shí)現(xiàn)組件預(yù)覽項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-05-05vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面
這篇文章主要介紹了vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Vue3響應(yīng)式高階用法之shallowReadonly()使用
在前端開(kāi)發(fā)中,Vue3的shallowReadonly() API允許開(kāi)發(fā)者創(chuàng)建部分只讀的狀態(tài),這對(duì)于保持頂層屬性不變而內(nèi)部屬性可變的場(chǎng)景非常有用,本文將詳細(xì)介紹?shallowReadonly()?的使用方法及其應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09vant?toast?關(guān)閉棧溢出問(wèn)題及解決
這篇文章主要介紹了vant?toast?關(guān)閉棧溢出問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題
這篇文章主要介紹了解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07