vuex mutations_Vuex总结

初始Vuex

vuex是什么呢？官方文档是这么说的。

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

对于新手来说，这段话肯定是看不懂的，那vuex到底是什么呢？通俗点就是用于管理数据的工具，即用于读写数据(增删改都是写)的工具而已，没有官网上解释的那么复杂。

Vuex包括State、Mutation、Action、Getter、Module，其实它们的功能和Vue中的data、methed(同步操作数据方法)、methed(异步操作数据方法)、computed相似，类似于换了套说法而已。一般再怎么简单的 Vuex，也至少会由 State 和 Mutation 构成。

Vuex的使用

Vuex就是用一个对象包含所有数据和方法，全局，唯一，对象，随意使用就是其本质。

• 不用安装了，创建项目的时候自动安装了

1.为什么会有Vue.use(Vuex)？

在src/store/index.ts里，初始化代码。

• 因为use方法会去调用Vue的原型上面绑定一个共用属性：$store
• 于是我们就可以通过this访问到$store啦

2.use方法也没传store，store哪来的呢？

• 是main.js里面传进去的store，Vuex会告诉Vue当main.js初始化的时候，开发者会给你传一个store，你把store绑到Vue的原型上
• Vue.prototype.$store会等于用户传进来的store，store什么时候传呢，main.js初始化的时候(初始化的时候传东西是Vue的特点，就是这样设计的)

3.state和mutation【同步数据方法】

1）默认state参数，使用commit调用mutations中的方法

我们在state中声明count后，怎么获取到state中的count？

• mutation里写的方法会默认有一个state参数，就是我们定义的state，可以从这个参数拿count

• Vuex封装了一个方法commit，会帮我们传参数state，我们需要使用commit调用mutations中的方法

• 比较控制台的结果

2）如果调用需要传一个参数怎么办

• 传参呗，但只能传一个参数，不能多个

3）如果需要传多个参数怎么办

• 可以传对象
• Vuex把state参数之后的参数叫做【payload】

4.action【异步操作数据方法】

• 发一个Ajax请求
• 做一个异步操作
• 做完异步之后如果想改数据，调用【mutation】

5.module

背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

一般结构如下：

const