Vue注释(Vuex全球状态管理器)

全局状态管理器可以在项目的任何组件中获得和修改,可以获得全局响应的变量可以修改。

在vue-cli2项目中安装vuex,并使用NPM安装vuex-save。

安装成功后,在src目录下创建一个新的store文件,并在其中创建一个js文件。

在js文件中写入:

然后将商店引入main.js文件,并在vue实例中注册。

vuex的文件配置在这里完成。

现在回到存储文件中的参数。这些对象是vuex的五个核心:

状态:全局可访问的对象。

Getter:和vue的computed一样,用来实时监控状态值(最新状态)的变化。

突变:存储改变状态值的方法(同步)

动作:在突变中触发方法(异步)

模块:模块

状态是存储在Vuex中的数据对象,就像Vue实例中的数据一样。只有状态可以全局访问。

定义stata对象,在state中直接定义key:val,可以定义任何数据类型。

用这个。$store.state获取页面中state的值。

在这里,状态通常安装在计算的计算属性上,这样当状态的值发生变化时,它可以及时做出响应。

当然也可以用手表来听。

状态中的辅助功能mapState

当一个组件需要获得多个状态时,将所有这些状态声明为计算属性会有些重复和多余。为了解决这个问题,我们可以使用mapState辅助函数来帮助我们生成计算属性。

输出

Vuex允许我们在存储中定义getter(可以认为是存储的计算属性)。就像计算属性computed一样,getter的返回值是根据其依赖关系进行缓存的,只有当其依赖关系值(state中的属性)发生变化时才会重新计算。

Getter的作用是实时监控状态值的变化。

定义Geters对象

使用state作为其第一个参数。

您可以使用其他getter函数作为第二个参数。

在页面中使用getters并使用这个。$store.getters

Getters中的辅助函数mapGetters

mapGetters辅助函数只是将存储中的getter映射到本地计算属性:

输出

改变Vuex的商店中的状态的唯一方法是提交突变。

使用state作为第一个参数。

用这个。$store.commit ('method name ')在突变中触发方法。

输出

第二个参数的官方解释称为提交的有效载荷。

您可以向store.commit传递一个额外的参数,即变异的有效负载

简单地说,您可以在第二个参数中传递附加参数。

这里以姓名为例。

输出

在Vuex中,突变必须是同步函数。

动作可以包含任何异步操作,动作的作用就是异步触发突变。

定义一个操作对象

接收上下文参数和要改变的参数。

Context与store实例具有相同的方法和属性,因此它可以执行context.commit(" "),或者使用context.state和context.getters来获取状态和getters。

用这个。$store.dispatch("方法名")方法来执行操作。

输出

类似地,Action也支持load方法,传入第二个参数。

输出

模块的作用是把商店分成模块,每个模块都有自己的状态、变异、动作、getter,甚至嵌套的子模块——从上到下的划分方式是一样的:

主要解决由于使用单个状态树,应用程序的所有状态都会集中在一个比较大的对象中的问题。当应用程序变得非常复杂时,store对象可能会变得非常臃肿。

简单来说,vuex可以模块化。