Vuex全面用法总结

tech2024-08-21  41

什么是Vuex ?

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

Vuex 的特点

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

Vuex的使用

1、this. s t o r e : 我 们 可 以 通 过 t h i s . store : 我们可以通过 this. storethis.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、甚至是嵌套子模块——从上至下进行类似的分割

最新回复(0)