Vue.js Vuetify v2图标颜色仅hover后更新问题求助

问题根源 #

Vue2的响应式系统无法检测到直接修改嵌套对象属性的操作，导致数据更新后视图没有同步触发重新渲染，只有hover等触发组件刷新的行为发生时，才会显示最新的颜色状态。

解决方案 #

方法1：使用Vue.set确保响应式更新 #

在Vue2中，使用Vue.set可以手动触发对象属性的响应式更新。

1. 先在store/user.js中引入Vue：

import Vue from 'vue'

2. 修改对应的mutation代码：

const mutations = {
    [mutationTypes.SET_TBM]: (state, payload) => {
      console.log('271-SET_TBM_before',payload.cnt);
      // 替换原直接赋值语句，用Vue.set触发响应式
      Vue.set(state.settings, 'tbm', payload.cnt);
      console.log('SET_TBM_after',state.settings);
    },    
};

方法2：替换整个settings对象 #

通过扩展运算符生成新的对象替换原对象，让Vue检测到对象引用的变化，从而触发响应式更新：

const mutations = {
    [mutationTypes.SET_TBM]: (state, payload) => {
      console.log('271-SET_TBM_before',payload.cnt);
      // 生成包含新属性的新对象，替换原settings
      state.settings = { ...state.settings, tbm: payload.cnt };
      console.log('SET_TBM_after',state.settings);
    },    
};

额外验证 #

确保你的Vuex getter正确返回settings对象，比如：

const getters = {
  settings: state => state.settings,
  // 其他getter...
};

以上两种方法任选其一，都能让Vue检测到settings.tbm的变化，触发toolbar组件实时更新图标颜色。

内容的提问来源于stack exchange，提问作者Joe