Question

我需要一个“半全局”商店，我的子组件在其中打开商店，它的子组件也可以访问它。我不需要vuex，b / c我不需要全球性的单一真理来源。我想将我的半全局存储区包含在该组件及其打开/导入它的子组件中。我正在使用单个文件组件。

我的商店在js文件中定义，如下所示：

export const store = {
  state: {
    checkedSymbols: []
  },
  updateCheckedSymbols (symbol) {
    const index = this.state.checkedSymbols.indexOf(symbol)
    if (index === -1) {
      this.state.checkedSymbols.push(symbol)
    } else {
      this.state.checkedSymbols.splice(index, 1)
    }
    console.log('updated symbols array: ', this.state.checkedSymbols)
  },
  destoryStore () {  // using this to manually destroy/reset my store
    this.state.checkedSymbols = []
    console.log('store destroyed')
  }
}

我有一个子视图，在其中打开了一个模态，在这个模态中，我还有其他几个子视图。在这种模式下，每当我需要访问该商店时，我都会导入该商店以对其进行访问。它是被动的，可以完美运行，但是我不认为我了解这家全球商店的运作方式。

当用户关闭我的模式时，我将其销毁，以便用户再次打开该模式时，它将重新呈现所有内容。我的看法是，如果“重新渲染”组件，数据也会刷新到起点。我测试了一下，我的看法似乎是正确的。

但是我的商店仍然使用以前的值。为什么会持续存在？也许我没有正确使用这个全球商店概念。现在，我正在销毁的钩子中手动销毁它，但我很好奇为什么即使导入商店的组件已销毁并重新渲染，它仍然存在。

根据本文，我创建了一个简单的全局商店： https://medium.com/fullstackio/managing-state-in-vue-js-23a0352b1c87

感谢您的时间和帮助！

将数据持久存储在全局商店vuejs2中

0 个答案: