尽管状态更新,为啥 vuex 组件没有更新?

Posted

技术标签:

【中文标题】尽管状态更新,为啥 vuex 组件没有更新?【英文标题】:Why is the vuex component isn't updated, despite the state updating?尽管状态更新,为什么 vuex 组件没有更新? 【发布时间】:2016-12-13 07:23:59 【问题描述】:

当我加载我的页面时,我会获取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 扩展,我可以提交状态并查看更改。

为什么我的更改没有自动应用?

【问题讨论】:

【参考方案1】:

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

由于 javascript 的限制,Vue.js 无法检测到以下内容 更改为数组:

当您直接使用索引设置项目时,例如vm.items[0] = ; 当您修改 Array 的长度时,例如vm.items.length = 0

商店

optboxes 现在是一个数组。

const state = 
    optboxes:[]

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

【讨论】:

【参考方案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);

这将触发视图更新。

【讨论】:

不确定是否相关,但state.optboxes 不是Array,而是Object。使用$set() 方法失败了我的承诺【参考方案3】:

使用Vue.set 为我编辑它。看看here

【讨论】:

以上是关于尽管状态更新,为啥 vuex 组件没有更新?的主要内容,如果未能解决你的问题,请参考以下文章

VueJS - Vuex 状态更新时组件不更新

为啥尽管观察者的状态发生变化,但应用程序重启后 Flutter BloC UI 没有更新?

Vuex 提交不更新状态

为啥即使我没有将 vuex 状态绑定到任何 html 输入元素,我的 vuex 状态也会在更改组件级别状态时发生变化?

Redux - 状态正在更新,但 React 组件没有

VueX:为啥 vuex 存储数据不更新组件数据属性?