Vuex用法详解

Vuex用法（新手教程）

对于新手，觉得Vuex难懂，在项目开发中也不想运用，想着能省则省，但是你会发现也许会造成大量的代码冗余。如果学会了Vuex，可以简化你大部分代码，作为新手，通俗的讲一讲关于Vuex的用法。

1. 新建一个store.js文件；
2. 在main.js文件下引入并使用（注意store.js文件的引入路径）；
3. 在store.js文件下引入Vuex，一定不要忘记use.(Vuex)。这个时候就可以放心使用Vuex的功能了，state下就是储存的注册在全局的状态值，先初始设置一个count值
   
   此时我们获取count值，可以发现，用this.$store.state.count方法可以直接获取到，如果你不想写这么一长串，也可以借助辅助函数mapState来获取全局的count值，看下图。发现取到的两个值一样
   
   4.我们再看看Vuex中改变状态值的方式，我们先在store.js中添加actions和mutations属性，他们用处已经做好注释
   
   5.我们在页面先定义几个方法，用来改变count值，记住Vuex中this.$store.dispatch执行actions下的方发，commit方法是调用mutations属性下的方法的，mutations属性又是统一存放改变state状态方法的
   

我点了5下 + 号，结果显示为10091，说明执行了mutations下修改状态值的getAddCount方法，同理点击 - 号也是一样

最后，如果说不想写这么一长串 this.$store.dispatch(),我们同样可以借助辅助函数mapActions,所得到的效果一样

当然你可以动态绑定值，来进行定量的更改状态count的值，如下图

设置默认输入值为10，按下+号5下，可以看到结果，这样就实现了运用Vuex来动态改变全局的状态值state