新手教学vuex（一）

菜鸟教学vuex（一）

1、vuex基本概念

Vuex是什么？Vuex 是一个专为Vue.js应用程序开发的状态管理工具，用于平行组件间的通信（传值，双向数据绑定）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

重要的一点： vuex的状态存储是响应式的

关于vuex的基本概念解释基本就是一张图的事情：

2. 使用之前先安装 ，安装教程

（1）安装

cnpm install vuex --save

（2）然后就是新建一个store文件专门用于我们vuex的状态管理；
在src文件夹下创建新的文件夹store
在store文件夹下新建一个index.js

在store/index.js文件内引入vue、vuex
定义了
一个state对象，这个对象包含了全部应用层级状态（全局共用的数据）
一个mutations对象，用来对state里值得状态改变
一个getters对象，用过来获取state里的对象
导出vuex，方便外部的引用

（3）要在main.js中引入vuex仓库

这里说明下：
1.如果你在src下创建的文件夹是store/index.js,那么在main.js中引入store时可以写成：

import store from './store'      等同于    import store from './store/index'; 

即，如果文件夹名是store，那么index.js可以省略不写；
2.如果你在src下创建的文件夹是vuex/store.js,那么在main.js中引入store时必须写成：

import store from './vuex/store';

（4）在组件中 通过store.state来获取状态对象 并使用仓库state中的值

第一种使用方法，直接调用

效果：

第二种使用方法，通过computed计算属性取值

如果在全局没有引入 只在单个文件中使用的话，我这里单页面引用一次vuex仓库（全局引用过之后，单页面就 不用再分别引用了）

效果：

（5）在组件中，通过store.commit方法触发状态变更。


效果： 点击加减号，age=18. 跟随加减变化

（6）在组件中，通过store.commit 传参方法 改变状态值


效果：

总结上面有几个知识点：

1. 从store实例中获取状态方法就是
   1.直接 this.$store.state.xx属性;
   2.在computed计算属性中return返回某个状态。
2. 通过store.state来获取状态对象，通过store.commit方法触发状态变更，通过store.commit 传参方法 改变状态值。
3. store 一般引入到 main.js文件，当然也是可以引用到组件中，Vuex 通过store选项，提供了一种机制将状态从根组件『注入』到每一个子组件中,也就是说如果你在根组件里注册了store选项，那么子组件用this.$store就能访问到了。
4. vuex的状态存储是响应式的，

以上就是官网上那个示例具体到项目中的的简单实现了。