vuex的奇怪行为答案

【问题标题】：Strange behaviour of vuexvuex的奇怪行为
【发布时间】：2019-08-07 13:03:20
【问题描述】：

我在 Vuex 中有一个模块。它有一个子级模块，所以要获得我需要的聊天成员：this.$store.state.dashboard.chat.members。

我可以通过 mutator 添加这个成员，在 vue-dev-tools 我可以看到新的“成员”，但在渲染的模板中它不会出现。

模块chat.js 看起来像：

export default {
    namespaced: true,
    state: {
        'members': {}
    },
    getters: {
        members: state => {
            return state.members;
        }
    },
    mutations: {
        addMember(state, member) {
            state.members[member.id] = member;
        }
    }
}

我正在使用mapGetters 来获取会员：

 computed: {
  ...mapGetters('dashboard/chat', {
    members: 'members',
 }),

在我使用的模板中：<div class="some-class" v-for="user in members">

所以，从我聊天的Index.vue 调用this.addMember 后，用用户信息作为对象I can see 这个对象在vue-dev-tools，但是I can't see it on page

当我尝试使用addMember“时间旅行到状态”时，在下一个提交状态之前，我已经看到了呈现的成员列表。

The result

下一个状态是更新会员在线状态，这意味着只需更改members[id].is_online 的值。我试图删除这个 mutator，但没有任何改变。

请帮忙=)

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

在 vue 中，为了保持对象属性的反应性，您应该使用 set 方法或 object.assign 对其进行更新。阅读更多关于 vue 反应性here.

 mutations: {
        addMember(state, member) {
            let memObj = {}
            memObj[member.id] = member;            
            state.members = Object.assign({}, member);
        }
    }

如果你只想改变特定的属性，你可以使用 Vue.set 方法。否则，如果 state.members 中有其他属性，则可以将它们复制到 memObj 并使用 Object.assign 重新分配，如上所示。

【讨论】：