（1）简单的页面中使用单向数据流
image.png
（2）vuex的流程图
image.png
（3）store
由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation
为什么需要使用vuex?
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态
（4）还是从一个计数器开始
在vuecli里面使用vuex还是讲究一点规矩的
- 进行包的安装 cnpm i vuex --save
- 在src下新建一个store文件夹，store下新建一个index.js
3.每当使用插件，一定要记得引入，并使用Vue.use()
image.png
image.png
方法中传入state参数就不再需要this
-
创建好store仓库以后就需要组件来调用状态，更新状态，之前还应该有一个步骤将这个store仓库注册到全局，通过this.$store来进行全局调用
image.png
-
接下来就可以再全局进行使用，组件直接去调用，使用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
- 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，就是用来保存登录状态，结合本地存储
网友评论