使用vuex从入门到应用（一）

我们做一个简单的示例，内容为：点击+1按钮数字加一，点击-1按钮，数字减一；

效果图

我们用vue-cli脚手架搭建一个项目，然后（npm run dev）跑起来，一般不会出现问题（遇到问题的小伙伴欢迎交流）。

首先，我们需要安装vuex：npm install vuex --save

然后，我们在src文件夹下创建store文件夹，在store文件夹里创建一个index.js文件（你也可以叫其他名字，但是后续引入的时候要写清楚哪个js，如果你想一个模块整理为一个vuex方便管理，我们也可以在index里统一引入再导出，后续会讲到，暂时先讲简单的都写在index.js里面）。有一点我们需要注意的是，我们new出来的Vuex.Store一定要记得导出（export），刚开始用vuex的时候，忽略了这个小点或忘记写了，就吃了很大的亏。当然也不限于vuex，我们创建的所有js，都记得一定要导出。

index.js

如上图，index.js中代码只写了state和mutations两部分，state中是vuex中存储的变量，mutations是改变vuex中储存的变量的方法，这里不再赘附，详细知识请看vuex官方文档（vuex中文文档传送门）。

为了所有的组件都可以使用store中的数据，我们需要在vue根文件中注册store,在main.js文件中引入store。如下图：

main.js引入

下面我们就可以在组件中使用了，使用方法也很简单，就是使用计算属性返回store中的数据到一个新属性上，然后在你模板中则可以使用这个属性值了。如下图：

组件中引用

到这里，我们一个简单的运用vuex的例子就完成了。