重新加载后 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;
}

重新加载后 Vuex 状态不存在

Vuex state not consisting after reload

vue.js

vuex

vuejs3