Vuex入门

（1）简单的页面中使用单向数据流

image.png

（2）vuex的流程图

image.png

（3）store

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation

---

为什么需要使用vuex?

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态

（4）还是从一个计数器开始

在vuecli里面使用vuex还是讲究一点规矩的

1. 进行包的安装 cnpm i vuex --save
2. 在src下新建一个store文件夹，store下新建一个index.js
   3.每当使用插件，一定要记得引入，并使用Vue.use()

---

image.png

---

image.png

方法中传入state参数就不再需要this

4. 创建好store仓库以后就需要组件来调用状态，更新状态，之前还应该有一个步骤将这个store仓库注册到全局，通过this.$store来进行全局调用

   
   
   

   image.png

---

---

5. 接下来就可以再全局进行使用，组件直接去调用，使用store里面的数据最好通过计算属性来渲染，更新还是通过methods,但是不是直接去操作state，而是通过mutations

   
   
   

   image.png

---

（5）getters

对state里面的数据进行过滤封装处理，然后在计算属性里面还是通过this.$store.getters.methodName进行调用（可以认为是 store 的计算属性），就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

---

Getter 也可以接受其他 getter 作为第二个参数

---

在上一个Demo中进行增加

---

image.png

---

image.png

---

晦涩难懂

---

image.png

getters必须写在组件的计算属性里面，页面展示可以直接调，但是在方法里面调用需要加上this

（6）mutations

唯一的更新state数据的方法，在组件中commit的时候类似JQ的trigger方法
如果要使用 ...mapMutations([ ])辅助方法并在页面创建时调用以获取数据必须写在methods里面，然后去created里面调用mapmutation里面的方法

（7）Action

image.png

虽然还没深刻领悟到为什么要在mutation上再加一层，但是怎么用还是要明白的，现在唯一知道的就是可以组件向action传参(mutation也可以传参，主要差别还是一个是同步，一个是异步)

---

自然还是先创建action,通过提交mutation里面的方法来传递参数

---

image.png

在组件里面又是如何来处理呢？既然对象都变了，方法肯定也变了，使用
this.$store.dispatch("actionName", param)来分发

---

image.png

---

1. ES6的写法

---

image.png

---

（8）

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态

（9）坑爹的getters

要想获取state里面的数据，必须通过计算属性来返回，另外不能直接通过
this.$store.state.data来获取数据

（10）

image.png

（11）开启严格模式

image.png

（12）总结一下

我发现人啊就是容易忘记，我有几次都能记得getters, mutations, actions,就是不记得用什么来触发了，或者记不起那两个单词了

• commit --> mutations（同步）
• dispatch --> actions(异步)

（13）关于vuex的使用

使用vuex开发管理系统，开始是头非常晕的，状态总是易变的，还相互影响，后面想明白了，不是什么地方都需要状态管理的，除了登录的用户信息以及Token的处理，其他地方还是正常的去用axios拉取数据渲染，直接与后台交互，没必要使用vuex，就是用来保存登录状态，结合本地存储

（14）Bus总线

通过实例化一个vue实例赋值给Bus

（15）vuex结合表单

通过触发输入函数来commit mutation

image.png

（16）actions(mutations)与v-model的结合

对于commit或者dispatch进来的对象不能进行直接添加到state里，需要重新构造一个对象
不然会导致v-model绑定到state中的对应数据，并会关联同名属性都变成输入值

image.png

（17）启用vuex logger插件

image.png

（18)

image.png