©
本文档使用
php.cn手册 发布
所有 Vuex 应用的中心就是 store(状态存储)。”store” 本质上是一个保存应用状态的容器。这里有两件要点,让 Vuex store 区别于普通全局对象:
Vuex store 是响应式的。当 Vue 组件从 store 读取状态,如果 store 中的状态更新,它们也会高效地响应更新。
你不能直接更改 store 中的状态。更改状态的唯一的方法就是显式 提交更改 (committing mutations)。这样可以确保每次状态更改都留有可追踪的记录,并且可以使用工具帮助我们更好地理解我们的应用。
NOTE: 我们将会在以后的示例代码中使用 ES2015 语法。如果你还没有用过,你应该看看!
安装 Vuex 之后,我们来创建一个 store。这是一个非常易懂的例子 - 只含有一个初始化状态对象,以及一些更改:
// 如果使用模块系统,确保之前调用过 Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
现在,你可以通过 store.state
访问状态对象,以及通过 store.commit
触发状态的更改:
store.commit('increment') console.log(store.state.count) // -> 1
再次说明,我们提交 mutation 而不是直接更改 store.state.count
,是想要显式地追踪它。这个简单的转换使你的意图更加明显。当你阅读代码时,可以更好地了解应用中的状态更改。另外,这也让我们有机会去实现一些工具,记录修改日志、保存状态快照、甚至是进行基于时间轴的调试。
因为 store 的状态是响应式的,要在组件中使用 store 的状态,只需在 computed 属性中返回 store 的状态就行。而触发状态改变可以简单的理解为在组件方法中提交 mutation。
这是一个 最基本的 Vuex 计数应用 的例子。
接下来,我们将在更多的细微细节中讨论每个核心思想,让我们从 State 开始吧。