在 Vue3 中更改视图时处理 Vuex 状态

Question

我正在 Vue3 中构建一个类似于Scratch 的网络应用程序，其中我有一个专门用于创建游戏的页面。在此页面上，我需要在商店中跟踪有关游戏的一些数据，以便所有组件都可以访问它。例如，我需要跟踪游戏中的 Sprite 列表以及游戏中当前选择的 Sprite。这些对象在多个组件的整个视图中被引用。目前，我将其全部存储到 Vuex 中。

但是，如果用户返回主页（或论坛页面等），存储在 Vuex 中的数据就没有任何意义了！当没有创建游戏时，无需跟踪“Sprite 列表”！

我以 Scratch 的设计为例：

1. Editor 组件必须显示所选 Sprite 的代码。
2. Stage 必须呈现所有 Sprite 的响应式列表。
3. Sprite Selector 必须呈现（和修改）所有 Sprite 的列表。

所以这些 Sprite 对象必须以某种状态存储。

我的问题是：当用户切换页面并且不再创建游戏时，用什么 Vue3 方法来处理这种状态？我应该按照here 的描述为这个视图实现一个简单的存储吗？ Vuex 仅适用于单页应用程序还是可以在这种情况下使用？

我也有使用单独的 Vue 应用程序来保存创建页面的想法。例如：

const createGameApp = createApp({
   // this is used only for the Create page. It could have its own Vuex!

}).mount('#app-a')

const restOfTheWebsite = createApp({
    // this will be used for everything else

}).mount('#app-b')

Answer 1

如果您使用的是 vuex，最简单的方法（恕我直言）就是使用 replaceState

这个想法是，您创建的对象的存储处于默认状态。

然后，当您需要清除状态时，您可以替换整个状态，或者使用解构来选择保留哪些部分，哪些不保留。

const defaultState = {
  user: {lastlogin:null, username:null},
  editorStuff: {currentScene:null}
}

const store = createStore({
  state () {
    return JSON.stringify(defaultState) // or create a deep copy some other way
  },
  mutations: {
    clearEditor(state) {
      const newState = {...state, editorStuff:defaulfState.editorStuff}
      Object.assign(state, newState) 
      // or...
      store.replaceState(JSON.stringify(defaultState))
    }
  },
})