搭建Vuex环境

先去安装vuex。

我们安装好了就要去使用它，同样我们是在main.js中去配置：

 

我们这里的store是相当于一个管理者，它会去管理vuex身上的很多组成部分。

 

我们的store中要去管理者三个部分以及画圈的两个api。

我们既然使用了store，就要去配置它，我们用官方的方法在src下新建文件夹store在文件夹中新建index.js文件，在里面去写配置内容：

 

我们就配置完了。

我们现在创建 完了store那我们就可以去在main.js里引入我们这个真实的store了:

我们 是不是以为我们这样写完了，非常完美，我们去运行：

报错显示是我们要在引入store之前先使用Vue.use(vuex)。

但是我们调整顺序是没有什么用的，在vue中文件优先执行import语句，所以这里引入store一定会在use vuex之前执行，我们应该怎么处理呢？

我们就不在main里配置就行了呗，我们去在index.js里去配置:

 

 这样写，我们一定是在创建store之前就引入了vuex了的。

我们的main.js就不需要再去引入vuex和使用vuex了：

只需要引入store就好了。我们的配置就到这里了，接下来就去写实际的业务了。

我们来说说 一些概念上的知识点：

求和案例_Vuex版 

我们正常要有多个组件才使用vuex会比较好，但是这里就是演示，我们学习组件和store之间的读写，这个会了，以后多个组件也可以来回去套。我们要把数据交给store了这回:

那在组件中我们所有能使用sum的地方就要先都删去了，因为sum不在组件里，组件里没法使用了。不使用sum的地方不受影响。

我们已经把数据交给了state，我们是选择加还是减哪个操作这个要交给Dispatch来处理：

 

我们现在vc到dispatch这条路就走完了：

 

接下来我们要走到负责中介功能的action上去：

 

 

 

 我们可以看到能传来数值，a对象中包含$store的方法commit和dispatch。我们就知道如何去做了，一定是调用$store:

但是如果我们输出store身上的东西去看看的话，我们会发现我们的a对象身上的东西比store少很多。我们可以管它叫ministore。官方叫它context上下文：

我们现在到了Commit部分：

我们的上下文对象中包含Commit。

 

 

它说没有找到我们的jia方法。

所以我们要在mutation中补一个jia方法:

 

 

 

那现在加法的逻辑我们写完了，那我们怎么去在插值语法中调用sum呢？

 

模板里不需要写this，模板中可以使用vc身上所有的东西，找到store身上的state上面的sum属性：

 

我们现在就可以把其它的功能也完善出来了：

减法：

 

 

奇数才能加法运算,定时器加法:

 

 我们现在所有的功能就都写完了。

我们可以优化一下我们的代码，我们不在我们的组件中的方法做任何业务逻辑和判断以及定时器的任务，这些都交给actions来做:

然后我们在actions中去添加任务：

 

但是我们可能会觉得，在actions中的jia和jian方法有点多余，它里面没有任何的业务逻辑，就是直接调用mutatiions里的JIA和JIAN方法了，写的有点没用。我们可以进一步优化，在actions中不写这个了：

 

如果我们觉得没有什么业务逻辑，可以不走actions，就直接从vc到mutations中：

 

我们先写到这里，所有功能也都好了，但是之后我们还要去对它做一个改进。