Изменение состояния Vuex на объекте не вызывает повторное рендеринг

Question

У меня в хранилище vuex есть переменная permissions. И я хочу, чтобы мой компонент запускал рендеринг при изменении getPermissions. В vue devtools я ясно вижу, что состояние в хранилище изменилось, но компонент все еще получает старое состояние из getPermissions. Чтобы увидеть изменения, я должен сделать refre sh. Это как-то связано с тем, как я меняю это? или тот факт, что это объект?

При заполнении он выглядит следующим образом:

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

Поскольку получатель возвращает только переменную состояния, вам следует использовать 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);
  },
}