Vuex全面用法总结

什么是Vuex ？

Vuex是专门管理vue.js应用程序中状态的一个插件，作用就是将应用中的所有状态放在一起进行集中式管理。
管理的状态主要是vue组件中date里面的属性

Vuex 的特点

vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。

Vuex的使用

1、this.$store：我们可以通过this.$store 在vue的组件中获取 vuex的实例。

2、State ： vuex中的数据源，我们可以通过 this.$store.state 获取 我们在vuex中声明的全局变量的值。

3、Getter： 相当于vue中的computed ， 及 计算属性， 可以用于监听、 计算 state中的值的变化

4、Mutation： vuex中去操作数据的方法 （只能同步执行）

5、Action： 用来操作 Mutation 的动作 ， 他不能直接去操作数据源， 但可以把mutation变为异步的

6、Module： 模块化，当你的应用足够大的时候，你可以把你的vuex分成多个 子模块

1.State

state即Vuex中的基本数据！state作为构造器选项，定义了所有我们需要的基本状态参数。

2.getters

即从store的state中派生出的状态。

3.mutations

提交mutation是更改Vuex中的store中的状态的唯一方法。
mutation必须是同步的，如果要异步需要使用action。

4.actions

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

5.Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。
为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割