解读vue页面监听store值改变问题

目录 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
? }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于解读vue页面监听store值改变问题的详细内容...