时间戳

首页 > 解决方案 > 重新加载后Vuex状态不包含

vue.js - 重新加载后Vuex状态不包含

问题描述

我使用连接到 vuex 存储的可排序列表并得到它：

        let nested = computed({
            get: () => {
                return store.getters.getItems;
            }
        });

当现在改变元素的顺序时，商店应该反应性地适应。console.log在商店内做类似的事情时：

        console.log(state.line_items_attributes.nested_form);
        var temp = cloneDeep(data.nested_form);
        state.line_items_attributes.nested_form = temp;
        console.log(state.line_items_attributes.nested_form);

赋值前后的值完全相同。

因此，我是否使用该突变并不重要。但是当删除它，然后刷新页面时，商店又回到了重新排列列表元素之前的状态。

标签： vue.jsvuexvuejs3

解决方案

正如目前所写的那样，您不会在 中改变您的状态vuex，而是在您的商店之外改变它，这是错误的做法。在这种情况下，响应性是从存储到组件的，而不是相反。

在您的情况下，要使用新顺序更新您的状态，您只需像您可能已经在其他突变中所做的那样进行操作：

CHECK_ORDER: (state, data) => {
   state.line_items_attributes = data;
   console.log(state.line_items_attributes);
}

否则，在突变之外进行突变时，您还应该收到以下错误：

Error: [vuex] do not mutate vuex store state outside mutation handlers.

快速提示：使用您所在州的副本

如果您需要先在商店之外操作某些东西，然后想改变状态，您可以像这样得到它：

this.localItems = JSON.parse(JSON.stringify(store.getters.getItems))

在这种情况下localItems，不会引用您在商店中的状态。正如所指的，vue.draggable.next提供了几个事件，您可以localItems在这样做的同时将排序的对象分派到商店。

您可以在Events |中查看这些事件。vue.draggable.next

小例子：

// HTML
<draggable :list="list" @end="onEnd">

// Function 
onEnd() {
   this.$store.dispatch('myAction', this.localItems)
}

// vuex Action
myAction({commit}, newItems) {
   commit('UPDATE_MY_ITEMS', newItems);
}

// vuex Mutation
UPDATE_MY_ITEMS(state,payload) {
   state.items = payload;
}

推荐阅读