解读vue页面监听store值改变问题
作者：榴莲豆包
这篇文章主要介绍了解读vue页面监听store值改变问题，具有很好的参考价值，希望对大家有所帮助。
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
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。