尽管状态更新，为什么不更新vuex组件？

Question

当我加载页面时，我会获取optboxes items的列表。

来源

项目的来源在线：

• optboxes page;
• store（商店，行动，突变，吸气者）。

optboxes页面

HTTP请求很好地发送并返回足够的数据：

created(){
    this.getOptboxes();
},
components: {
    'optbox': OptboxComponent,
},
methods: {
    getOptboxes() {
        optboxes.all().then((response) => {
            this.setOptboxes(response.data.output);
    }).catch(() = > {
            this.no_optbox_message = 'there is no optbox';
        logging.error(this.$t('optboxes.get.failed'))
    });
    }
},
vuex: {
    actions: { setOptboxes: actions.setOptboxes},
    getters: { optboxesList: getters.retrieveOptboxes}
}

我正在迭代结果如下：

<div v-for="optbox in optboxesList" class="panel panel-default">
     <optbox :optbox="optbox"></optbox>
</div>

存储

const state = {
    optboxes: {
        /*
        'akema': {
            hostname: "192.168.2.23",
            id: "akema",
            printers: [
                {
                    description: "bureau",
                    destination_port: 9100,
                    forward: "normal",
                    hostname: "1.2.3.4",
                    id: 0,
                    listening_port: 9102
                }
            ]
        }
        */
    }
};

问题

如果我切换到其他页面然后返回，则显示列表。我还注意到，使用Vuex扩展，我可以提交状态并查看更改。

为什么我的更改未自动应用？

Answer 1

由于Change Detection Caveats，我不得不更改数据结构。

  

由于JavaScript的限制，Vue.js 无法检测到以下内容   更改为数组：

     

  
• 直接设置带索引的项目时，例如vm.items[0] = {};
  
• 修改数组的长度时，例如vm.items.length = 0。
  

存储

optboxes现在是一个数组。

const state = {
    optboxes:[]
}

然后相应地更新我的突变以编辑数组。

Answer 2

也许这是一个反应性问题？！我假设你的setOptboxes变异没有被vue选中：

setOptboxes(state, optboxes) {
    for (var optbox of optboxes) {
        state.optboxes[optbox.id] = optbox;
    }
}

你可以在这里阅读：

https://vuejs.org/guide/list.html#Caveats

https://vuejs.org/guide/reactivity.html

文档解决方案是使用：

state.optboxes.$set(optbox.id, optbox);

将触发视图更新。

Answer 3

使用Vue.set dit it给我。看看here