当我加载我的页面时,我获取了一个 optboxes items 列表。

来源

项目资源在网上:

  • optboxes page ;
  • store(存储、 Action 、突变、 setter/getter )。
  • 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 扩展,我可以提交状态并查看更改。

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

    最佳答案

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



    店铺
    optboxes 现在是一个数组。

    const state = {
        optboxes:[]
    }
    

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

    10-06 08:10