网站内容管理(最简单的Store提示：状态改变，保存状态快照的调试工具)

　　网站内容管理(最简单的Store提示：状态改变，保存状态快照的调试工具)

　　开始

　　在 Scrimba 上试试这节课

　　每个 Vuex 应用程序的核心都是 store。 “Store”基本上是一个收录应用程序中大部分状态的容器。 Vuex 与纯全局对象有以下两点不同：

　　Vuex 的状态存储是响应式的。 Vue 组件从 store 中读取 state 时，如果 store 中的 state 发生变化，相应的组件也会随之更新。

　　您不能直接更改商店中的状态。更改 store 中状态的唯一方法是显式提交更改。这使我们可以轻松跟踪每个状态的变化，以便我们可以实施一些工具来帮助我们更好地了解我们的应用程序。

　　最简单的商店

　　提醒

　　我们将在后续文档的示例代码中使用 ES2015 语法。如果你还没有掌握 ES2015，那你要抓紧了（打开新窗口）！

　　安装 Vuex 后，让我们创建一个商店。创建过程很简单——只需要一个初始状态对象，并需要提供一些变化：

　　import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count: 0

},

mutations: {

increment (state) {

state.count++

}

}

})

　　现在可以通过store.state获取状态对象，通过mit方法触发状态变化：

　　store.commit('increment')

console.log(store.state.count) // -> 1

　　为了访问 Vue 组件中的 this.$store 属性，您需要为 Vue 实例提供一个创建的 store。 Vuex 提供了一种机制，通过 store 选项将 store 从根组件“注入”到所有子组件：

　　new Vue({

el: '#app',

store: store,

})

　　提醒

　　如果使用 ES6，还可以缩写 ES6 的对象属性（当对象的某个属性的键与传递的变量名称相同时使用）：

　　new Vue({

el: '#app',

store

})

　　现在我们可以从组件方法提交更改：

　　methods: {

increment() {

this.$store.commit('increment')

console.log(this.$store.state.count)

}

}

　　我再次强调，我们提交突变而不是直接更改 store.state.count，因为我们希望更清楚地跟踪状态的变化。这个简单的约定可以让你的意图更加明显，这样你在阅读代码时就可以更轻松地解释应用程序内部的状态变化。此外，这也让我们有机会实现一些调试工具，可以记录每个状态变化并保存状态快照。有了它，我们甚至可以实现时间穿梭般的调试体验。

　　因为 store 中的 state 是响应式的，所以从组件调用 store 中的 state 就像在计算属性中返回它一样简单。触发变化只是在组件的方法中提交突变。

　　这是最基本的 Vuex 计数应用程序的示例（打开新窗口）。

　　接下来，我们将更深入地探讨一些核心概念。让我们先从状态概念开始。