Vue3中修改视图时Vuex状态的处理

Question

我正在Vue3中构建一个类似于划痕的web应用程序，在那里我有一个网页专门用于游戏的创建。在这个页面上，我需要跟踪一些关于游戏在商店的数据，这样所有的组件都可以访问它。例如，我需要跟踪游戏中的雪碧列表和游戏中当前选择的雪碧。这些对象在整个视图中在多个组件中被引用。目前，我正在把它全部储存在Vuex中。

但是，如果用户返回主页(或论坛页面等)，存储在Vuex中的数据就不再有意义了！没有必要跟踪‘雪碧名单’时，没有创建的游戏！

我将以Scratch的设计为例：

​

1. 编辑器组件必须显示选定Sprite的代码。
2. Stage必须呈现所有Sprite的反应性列表。
3. Sprite选择器必须呈现(并修改)所有Sprite的列表。

因此，这些Sprite对象必须存储在中某种状态中。

我的问题是:当用户切换页面而不再创建游戏时，有什么Vue3方法来处理这个状态？我是否应该像描述的这里那样为这个视图实现一个简单的存储？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))
    }
  },
})