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
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持软件开发网。