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
}
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
