Vue学习（十一)----Vue生态（Vuex）

Vuex是干什么的？

现有的Vue中是遵循着  数据——>（驱动）——>视图——>（用户选择）——>状态

比如说现有的界面中有div，每个div中都需要展示用户名。如果是静态的数据，每个div里面包含一个表变量，只要将变量的值定好，那不就是每个div都会显示相同的值了吗？之所以要在div之间传值是因为这不是静态数据，而是响应式数据。通过用户的操作，这个值被改变了（比如用户输入生日，而数据库一开始默认的生活可能是1900-1-1）这个就叫做响应式数据，就是响应用户的操作所产生的数据，这个数据是临时产生的，不是事先就赋值给变量的，所以其他的div还是使用的变量最开始的静态值。怎么把这个临时产生的数据改变告诉其他所有使用这个数据的div呢？这个例子中，组件传值到全局的变量，完全可以直接跟mutation通信，不需要action。

但是如果同时有多个人跟mutation传值的情况下就会存在竞争关系。比如说对于同一个店铺，在同一个时间，是有N个人同时选择商品的，那么对于店铺管理员来说，商品的个数会实时更新，页面要根据用户的选择自动的更新商品的数量。如果有三个用户同时点击了同一样一个商品，按照道理说应该是3，但是由于mutation同时只能处理一个请求，另外两个请求无法请求，就会被丢弃掉，另外两个人的点击就不会成功。这个在12306抢票、医院抢号以及双11经常出现。所以就有必要将用户的请求先进行缓存，然后再丢给mutation，这样就可以保证mutation每个时间点都只会处理一个请求，而不会有其他的请求被丢弃。感觉action就是起到了一个缓存的作用，一个数据值的改变什么时候该传递给mutation，让全局的变量进行更改，这个时间点的把握由action来做，什么时候该采取这种传值的行为（action）由action这个模块来决定，就好像一拨人排队，有个叫号码的人，叫到你的号码你才能干嘛，action就是这个维持排队顺序并且叫好的人。

以前的方法就是在使用这个变量的所有的组件中一对一的建立连接，通过父子组件（props，emit/on）或者是爷爷组件和子组件（provide/inject）来解决。一个组件的数据改变了它会组播给其他的组件。但是对于兄弟组件，他们之间只能通过父组件或者爷爷组件间接通信，要绕上一大圈。

Vuex的方案就是这个组件先把修改后的数据传给在某个缓存中的变量，使得变量值发生改变，然后方法2）IDC中的变量会自动的推动变化过的值发送给使用它的组件，使得其他的组件同时更新数据，或者是方法3）是其他的组件侦听缓存中这个变量的值，一旦发生变化就将自己的值进行更新，这样就完成了数据的同步。要完成这个任务，还需要将步骤细分：

组件更新store内的数据：

步骤1，组件和action之间的通信

步骤2，Action和mutation之间的通信

             把修改后的数值传递给缓存（store）中的某个变量，使用commit命令，

步骤3， mutation和states之间的通信

组件获取store内的数据（取值）：

（1）可以直接通过：this.$store.state.xxx取值

（2）也可以通过getter函数。getters函数是在store里面定义的，是store的一个属性。它类似computed函数，要察觉到依赖有变化才会计算states。（这里并没有理解）

getter函数应该包含以下内容：

     a）组件侦听缓存中的变量，使用watch命令。

   computed:{                                                       
    haha () {
        return this.$store.state.msg                                       //先定义好要侦听什么数据，即要获取什么数据（要获取内存中state状态下的msg变量的数值）。computed跟method一样，只有当页面刷新的时候才会开始运行。一般输入用户的个人信息之后也需要按一个确认建，其他的div内的信息才会发生相应的改变。
    }
},
watch:{
    haha：function () {                                                        //监视这个haha函数，如果这个函数发生了变化（由于这个函数只有一个目的就是返回内存中某个变量的值，因此这个函数发生了变化，就说明变量的值发生了变化，就达到了监视的目的）。
        //插入需要在仓库数据变化时做的逻辑处理                 
    }
}

具体示例可以参照：

https://www.cnblogs.com/huangting/p/11366086.html