vuex 简单介绍

[TieMuZhen]

前言

• 请先阅读Vuex 快速上手

vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store注入。新建一个目录store。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

vuex有哪几种属性？

有五种，分别是State（初始化数据）、Getter（包装state中的数据）、Mutation （模块化）、Action（异步处理数据）、Module（唯一能够修改state的操作）。

区别

1、action可以异步，mutation必须同步
2、mutation是唯一可以修改state的（commit）
3、action修改state需要经过mutation（dispatch）

vuex的State特性

• Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。
• state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。
• 通过mapState把全局state和getters映射到当前组件的computed计算属性中。

vuex的Getter特性

• getters可以对State进行计算操作，它就是Store的计算属性。
• 虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用。
• 如果一个状态只在一个组件内使用，可以不用getters。

vuex的Mutation特性

Action类似于mutation
不同在于： Action提交的是mutation，而不是直接变更状态；Action可以包含任意异步操作。

不用Vuex会带来什么问题？

• 可维护性会下降，想修改数据要维护三个地方；
• 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
• 增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背。

参考文献

• Vuex 之 getters, mapGetters, ...mapGetters详解