vue 子页面监听vuex变化第一次发触发但是变化后不会监听只有手动刷新页面后才会有变化

页面监听vuex变化第一次发触发但是变化后不会监听只有手动刷新页面后才会有变化"/>

vue 子页面监听vuex变化第一次发触发但是变化后不会监听只有手动刷新页面后才会有变化

有一个需求就是对每个用户的操作进行保存,我把数据存在vuex中,奇怪的是watch监听一开始是有变化的;但是数据改变后页面却监听不到,只能手动刷新页面数据才会实时监听到变化

html:页面存储

   this.$store.dispatch('videoMonitorSystem/getUserInfoVideo', { data: params })

下面看错误代码"

/** @Author: your name* @Date: 2022-04-28 11:15:44* @LastEditTime: 2022-05-07 10:34:19* @LastEditors: 周云芳 164591357@qq* @Description: 实时视频监控模块* @FilePath: \web-pc\src\store\modules\videoMonitorSystem.js*/
import { Message } from 'element-ui'
const state = {userInfoVideo: {}, // 用户视频数据信息userId: ''
}
const mutations = {// 添加当前用户所点击的树控件内容SET_USER_INFO_VIDEO: (state, val) => {state.userInfoVideo[val.userId] = val.data},}
const actions = {// 对视频点击增加时进行处理getUserInfoVideo: ({ state, commit }, { data, startIndex, endIndex }) => {return new Promise(resolve => {// if (!data) resolve('')if (data) { // 双击或替换let { userId } = dataif (state.userInfoVideo[userId]) { // 信息已存在let isData = state.userInfoVideo[userId].find(item => data.id == item.id)if (isData) { // 点击了重复IDMessage.warning('此通道已存在!')// 有效保证重复时子组件的方法也能触发let newList = state.userInfoVideo[userId].reduce((cur, next) => {// true && cur.push(next)惰性求值？--如果最后一个表达式为非false，那么直接返回这个表达式的结果，反之直接是falsedata[next.id] ? "" : (data[next.id] = true && cur.push(next))return cur}, []) // 设置cur默认类型为数组，并且初始值为空的数组commit('SET_USER_INFO_VIDEO', {userId: userId, data: newList// state.userInfoVideo[data.userId]})resolve(newList)} else { // 同一用户信息下的不同树控件IDif (state.userInfoVideo[userId].length == state.curSplitScreen) { // 数据长度大于当前分屏数量,需做替换let list = state.userInfoVideo[userId].map((item, i) => {if (i == 0) {item = data}return item})console.log('做替换', list)commit('SET_USER_INFO_VIDEO', {userId: userId, data: list})resolve(list)} else {let userInfoVideo = state.userInfoVideo[userId]userInfoVideo.push({ ...data })commit('SET_USER_INFO_VIDEO', {userId: userId, data: userInfoVideo})resolve(userInfoVideo)}}} else {let arr = Array.of(data)commit('SET_USER_INFO_VIDEO', {userId: data.userId, data: arr})// console.log('第一次添加',arr)resolve(arr)}} else if (startIndex && endIndex) { // 拖拽console.log('拖拽啦', startIndex, endIndex)let data = JSON.parse(JSON.stringify(state.userInfoVideo[state.userId]))data[startIndex] = state.userInfoVideo[state.userId][endIndex]data[endIndex] = state.userInfoVideo[state.userId][startIndex]commit('SET_USER_INFO_VIDEO', {userId: state.userId, data: data// state.userInfoVideo[data.userId]})resolve(data)}})},}export default {namespaced: true,state,mutations,actions
}

测试了好几天发现是mutations方法这里的问题,

解决方法

const mutations = {// 添加当前用户所点击的树控件内容SET_USER_INFO_VIDEO: (state, val) => {let info = {}info[val.userId] = val.datastate.userInfoVideo = Object.assign({}, state.userInfoVideo, info)// state.userInfoVideo = val// state.userInfoVideo[val.userId] = val.data}}

这样就可以完美监听

import { mapGetters } from 'vuex'computed: {...mapGetters(['userInfoVideo']),getUserInfo () {console.log('-----------')return this.userInfoVideo[this.$store.state.userid]},},watch: {getUserInfo: {immediate: true,handler (newVal, oldVal) {console.log('四屏监听拖拽', newVal, oldVal)}}}