vue的Vuex

网上也很多文章，但解释起来的确玄乎，小白们很难理解到位。

自问文笔没大神们好只是自己了解了掌握了Vuex用法以及主要思路

但要我解释起来也只能参考大神们的说法

Vuex就是一个全局变量，而这个全局变量增删改查都有自己一套方法，

这样做的好处就是大团队多人协作不容易出错

Vuex小项目的确用的少，但面试基本会问到

如果面试能回答出自己对vuex的理解（并不是生搬硬套百度回来的文章）

基本可以证明对vue理解还是可以的能直接上手项目干活

// ====== （普通的分割线）  ==================

总结(各个类型的 API各司其职)：

mutation 只管存，你给我（dispatch）我就存；

action只管中间处理，处理完我就给你，你怎么存我不管；

getter 我只管取，我不改的。

 

action放在了 methods 里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的）

mutation是写在store里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它。

getter写在了 computed 里面，这说明虽然 getter我们写的是函数，但是我们应该把它当成计算属性来用。

 

这些方法都放在store.js文件里

四大方法：state、mutations、getters、action

 

辅助函数是个什么鬼？

简化vuex自带方法（构造器选项）的写法

辅助函数要配合ES6的扩展运算符使用 

// ====== state（仓库） ============

辅助函数：mapState

存放全局参数（存放组件之间共享的数据）

 

 

// ====== mutations（改变） ============

辅助函数：mapMutations

我们要改变 state 的数值的方法，必须写在 mutation 里就可以了

 

虽然mutations也能异步，但真的不赞成在里面写，在 mutation 中混合异步调用会导致你的程序很难调试。

例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？

这就是为什么我们要区分这两个概念（一句话反正别在mutations执行异步操作就得了）

 

 

// ====== Action（异步） ============

1.Action 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。

2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下

 

虽然mutations也能异步，但真的不赞成在里面写，在 mutation 中混合异步调用会导致你的程序很难调试。

例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？

这就是为什么我们要区分这两个概念（一句话反正别在mutations执行异步操作就得了）

 

// ====== getters（过滤器） ============

辅助函数：mapGetters；当前组件如果只读取就不用写这个

实时计算，里面的值无论在哪只要被被改变都会立刻触发下面的方法

getters里面的方法操作的变量不能重复，不然报错

简单说两个方法不能操作同一个变量

方法名要跟return变量名一样

 

看到这里Vuex的基本增删改查代码贴完了，

掌握了基本增删改查后进阶就是module（模块）了。

项目一大Vuex全局变量就变多了，这时候就应该module出现让Vuex全局变量能更分散

分享两个我看过个人觉得写得不错的文章

https://www.cnblogs.com/mmykdbc/p/8968266.html

https://www.jianshu.com/p/c91ee3d59453

 

 后话：

  Vuex需要一套方法来控制它自己的全局变量，这套方法虽然有点绕，但理解了就觉得不难了

  module部分代码我还没写，虽然有点烂尾的感觉，但其实Vuex的基本增删改查掌握了，module也不难了