在组件里使用 Store 里的 State 数据，我们需要在组件里添加一个 computed 属性，它里面的东西可以返回需要的 state 。添加一个组件 .. 名字可以是 Counter .. 一个对象 ..

添加一个 template ，定义一下组件的模板 .. 一组 div .. 上面加上几个 css 类，这些类的样式来自 semantic ui 这个css 框架 ..

里面绑定输出一个 count ，这个 count 显示的应该就是 store 里的 state 下面的 count 属性的值 .. 在组件里绑定的 count 应该是组件的 computed 里面的一个属性 ..

添加一个 computed .. 里面再添加一个 count 方法 .. 它做的事就是返回 store.state.count ..

再去创建一个应用 .. 名字是 app .. 新建一个 Vue 实例 .. el 指定一下应用绑定到的元素 .. 这里就是页面上带 app 这个 id 的元素 .. components ，需要的组件，添加一个 Counter ..

再添加一个 template .. 设计一个模板 .. 一组 div，上面加上一个 app 类 .. 里面再用一下 counter 组件 ...

打开 index.html .. 给 app 这个类添加点样式 .. 用一个 margin ，添加点外边距，大小是 32px ..

回到浏览器 .. 打开 Vue 开发者工具 .. Vuex ..

页面上现在会显示一个红色的圆形的标签 .. 里面显示的数字就是 store 里的 state 下面的 count 这个属性的值 ..

在控制台上 commit 一个修改 .. 名字是 add .. 每次 commit 这个修改以后，页面这个红色标签里的数字都会发生变化 ...

注入

回到应用 .. 在这个 Counter 组件里，我们直接用了 store 下面的 state .. 如果我们的应用使用了模块化的结构 .. 在每个组件里，你都需要先导入 store ..

Vue 提供了一种方法可以把 store 注入到所有的子组件里面 .. 新建 Vue 实例的时候，添加一个 store ..

这样在组件的 computed 里面， this.$store 就是应用的 store .. 修改一下这个 count 返回的东西 .. this.$store ..

再回到浏览器试一下 .. commit 一个 add 修改 .. 页面上同样会实时的输出 count 里的值 ...