对象上的 Vuex 状态更改不会触发重新渲染答案

【问题标题】：Vuex state change on object does not trigger rerender对象上的 Vuex 状态更改不会触发重新渲染
【发布时间】：2020-01-15 12:07:37
【问题描述】：

我在 vuex 存储中有一个名为权限的变量。我希望我的组件在 getPermissions 更改时触发重新渲染。在 vue devtools 中，我清楚地看到商店中的状态发生了变化，但组件仍然从 getPermissions 获取旧状态。为了让我看到更改，我必须进行刷新。这和我变异它的方式有关吗？还是它是一个对象？

填充后看起来像这样：

permissions: { 
    KS1KD933KD: true,
    KD9L22F732: false
}

我使用这种方法对其进行突变并使用 getter 来获取它：

const getters = {
  getPermissions: state => state.permissions
};

const mutations = {
  set_recording_permissions(state, data) {
    let newList = state.permissions;
    newList[data.key] = data.bool;
    Vue.set(state, 'permissions', newList);
  }
};

在组件中我使用 mapGetters 来访问它

computed: {
    ...mapGetters('agentInfo',['getPermissions'])
  }

为了更新权限值，我使用此操作（在更新值之前确实需要成功的 api 请求）：

const actions = {
  async setRecordingPermissions({ commit }, data) {
    let body = {
      agentId: data.userName,
      callId: data.callId,
      allowUseOfRecording: data.allowUseOfRecording
    };
    try {
      await AgentInfoAPI.editRecordingPermissions(body).then(() => {
        commit('set_recording_permissions', { key: data.callId, bool: data.allowUseOfRecording });
        commit('set_agent_info_message', {
          type: 'success',
          text: `Endret opptaksrettigheter`
        });
      });
    } catch (error) {
      console.log(error);
      commit('set_agent_info_message', {
        type: 'error',
        text: `Request to ${error.response.data.path} failed with ${error.response.status} ${error.response.data.message}`
      });
    }
  }
}

【问题讨论】：

.不应该是：..mapGetters(['agentInfo','getPermissions'])
不，我有不同的模块，在这种情况下，这意味着：从模块 agentInfo 获取 getter "getPermissions"

标签： vue.js vuex

【解决方案1】：

由于 getter 只返回状态变量，如果你想直接访问它，你应该使用 mapState。

computed: mapState(['permissions'])

但是，您也可以使用 mapGetters，但是在您的模板中，必须使用 getPermissions 而不是 permissions。示例模板：

<ul id="permissions">
  <li v-for="permission in getPermissions">
    {{ permission }}
  </li>
</ul>

如果您这样做了，则可能是对象引用存在问题。您使用Vue.set，但您设置了相同的对象引用。您必须创建一个新对象或直接设置要更新的密钥。

新对象

let newList = { ...state.permissions };

Vue.set

Vue.set(state.permission, data.key, data.value);

【讨论】：

我已经尝试使用 mapState，结果相同。目前在我的模板中，我以这种方式使用 getPermission：if(getPermissions[id]){console.log('hi)}
你应该发布你的模板，你的 vuex 存储和组件分开
我的文件有点复杂和大。也可能包含我不想显示的敏感数据。所以我已经简化了很多
您的问题可能与反应性有关。直接在添加的属性上使用 Vue.set 或使用扩展运算符复制对象通常可以解决它。
啊，谢谢，是的，当我复制我的值时，我需要使用扩展运算符

【解决方案2】：

我不知道你们其余的代码是什么样的，但您需要使用操作来正确地改变您的存储。

例如：

const actions = {
  setName({ commit }, name) {
    commit('setName', name);
  },
}

【讨论】：