Question

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

填充后看起来像这样：

permissions: { 
    KS1KD933KD: true,
    KD9L22F732: false
}

我用这种方法对它进行突变，然后用吸气剂得到它：

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}`
      });
    }
  }
}

Answer 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);

Answer 2

我不知道其余的代码是什么样的，但是您将需要使用操作来正确地对存储进行变异。

例如：

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

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

2 个答案: