今天聊一聊vue页面监听store值改变

最新推荐文章于 2024-01-17 07:55:08 发布

榴莲豆包

最新推荐文章于 2024-01-17 07:55:08 发布

阅读量6.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41992943/article/details/125319651

vue 专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了如何在 Vue 项目中使用 Vuex 进行模块化的状态管理，包括消息列表的设置、存储与更新，以及通过 computed 属性和深度监听来实时响应数据变化。通过实例展示了在权限管理模块中，如何存储和获取消息列表，以及在组件中正确地使用这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先建立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,//立即执行
    },
  },

完毕，这样能解决绝大部分问题。