这篇文章主要介绍了解读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 }以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。
以上就是解读vue页面监听store值改变问题的详细内容，更多请关注0133技术站其它相关文章！
