Close
升级到 Vue 3 | Vue 2 EOL

指南

状态管理

官方类 Flux 实现

大型应用程序通常会随着复杂性的增加而变得更加复杂，因为多个状态片段散布在许多组件中，以及它们之间的交互。为了解决这个问题，Vue 提供了 vuex：我们自己的受 Elm 启发的状态管理库。它甚至集成到 vue-devtools 中，提供零配置访问 时间旅行调试。

观看 Vue Mastery 上的视频解释

面向 React 开发者的信息

如果您来自 React，您可能想知道 vuex 与 redux（该生态系统中最流行的 Flux 实现）相比如何。Redux 实际上是与视图层无关的，因此可以通过 简单的绑定 轻松地与 Vue 一起使用。Vuex 的不同之处在于它知道它在 Vue 应用程序中。这使它能够更好地与 Vue 集成，提供更直观的 API 和改进的开发体验。

从头开始的简单状态管理

人们常常忽略 Vue 应用程序中真相的来源是原始的 data 对象 - Vue 实例只是代理对它的访问。因此，如果您有一个应该由多个实例共享的状态片段，您可以通过身份共享它

var sourceOfTruth = {}

var vmA = new Vue({
  data: sourceOfTruth
})

var vmB = new Vue({
  data: sourceOfTruth
})

现在，每当 sourceOfTruth 被修改时，vmA 和 vmB 都会自动更新它们的视图。这两个实例中的子组件也可以通过 this.$root.$data 访问。我们现在有一个单一的真相来源，但调试将是一场噩梦。任何数据都可以被应用程序的任何部分在任何时间更改，而不会留下任何痕迹。

为了帮助解决这个问题，我们可以采用存储模式

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

请注意，所有修改存储状态的操作都放在存储本身中。这种集中式状态管理使我们更容易理解可能发生哪些类型的修改以及它们是如何触发的。现在，当出现问题时，我们还将拥有导致错误发生的日志。

此外，每个实例/组件仍然可以拥有和管理自己的私有状态

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

State Management

需要注意的是，您永远不应该在操作中替换原始状态对象 - 组件和存储需要共享对同一个对象的引用，以便观察到修改。

当我们继续发展组件永远不允许直接修改属于存储的状态，而是应该分派事件通知存储执行操作的约定时，我们最终会到达 Flux 架构。这种约定的好处是，我们可以记录发生在存储上的所有状态修改，并实现高级调试助手，例如修改日志、快照和历史记录回滚/时间旅行。

这让我们回到了 vuex，所以如果您已经读到这里，也许是时候尝试一下了！

← 路由 服务器端渲染 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。