actions vuex 请求_vuex

注：变量用于保存状态的

官方解释：vuex是专门为vue.js应用程序开发的状态管理模式。

多个组件共享的变量存在vuex中（在这里面管理的变量都是响应式的，也就是js中的data改变会同步到视图当中）

然后将这个对象放在顶层的vue实例中，让其它组件可以使用。

那么，多个组件（也就是页面）就可以共享这个对象中的所有变量属性了

---

什么样的变量需要我们在多个组件里面共享呢？

1、用户登录状态，用户名称，头像，地理位置信息等等

2、商品的收藏、购物车中的物品等

这些状态信息（也就是变量）我们都可以放在统一的地方，对它进行保存和管理，而且他们还是响应式的（变量改变界面同步实现更新）

---

下面是对于单页面管理的解释：

图1

图2

以图2解释上面的图1代码：state里面保存了data中的变量counter，这个counter是在view上面展示的，而view上面能够产生一些actions行为，对应代码中的点击行为，而一旦产生了这些事件actions就会反过来修改我们的状态state（也就是里面存储的变量）【定义状态，状态在view上面展示，view上面产生了actions，actions反过来修改我们的state】

---

多页面管理：

项目结构：

第一步：

先在src路径下新建一个store文件夹,在这个文件夹里面新建一个index.js文件用于管理所有的需要多个页面共享（多个页面需要同时使用的）的状态（也就是变量），

svuex.Store的Store是vuex里面的一个class

第二步：

index.js建好之后需要在main.js里面挂载一下也就是写上import store from './store'

new Vue({

store,//放到这里的话到时候才能拿到上面import后面的store这个对象，它才会给我们的这个东西的属性赋一个$store的属性 到时候再把store赋值给vue.prototype.$store (也就是翻译为：vue.prototype.$store=store)，到时候你在其它组件里面都可以通过这个$store去拿到这个store，拿到这个store你就可以在多个组件里面使用store里面相关的东西了

})

红色圈出的部分属于vuex，vue components也就是vue的组件能够引用vuex里面的state（也就是里面定义的变量）-引用就能直接通过$符号引用，而修改能不行。

dispatch：分发、发布；先让组件（左边红色圈出部分）发布一个行为叫做actions，发布了一个行为之后再commit提交到mutations里面（意思是不让你在其它地方改state，改state的时候必须通过mutations再来改state），那么为什么做这么复杂的一个环节呢？因为有一个devtools这个是vue开发的一个浏览器插件（这里面可以帮助你记录每次一个你修改state的一个状态，为什么要记录这个状态呢？因为vue里面的状态是多个界面管理，一个状态可能被多个界面修改，如果多个页面都修改了，你不知道是哪个修改了）只有通过mutations修改状态，devtools才会帮你记录

如果你有异步操作 mutations里面一般都是一些同步操作，因为mutations里面有异步操作的话，devtools这个工具只能跟踪同步的操作，有异步操作（比如发送网络请求backend API-后端api）的话在actions，在actions里面做完之后，再提交到mutations就变成同步了。

图中commit语句意思是执行mutations里面定义的方法 在组件里面定义一个方法，在里面提交修改状态的方法（再在需要修改的地方，直接commit从组件提交到mutations）

以上就是最基本的使用

---

以下是vuex里面的五个核心使用：

ge tters类似于计算属性（计算属性一般用于数据要经过一系列的变化之后再展示的）

场景，每次都需要使用counter的平方：

1、在index.js文件（也就是vuex中）的getters里面定义，如下图

2、使用：