重新加载后Vuex状态不包含

Question

我使用一个连接到 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);

赋值前后的值完全相同。

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

Answer 1

正如目前所写，您不会在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;
}