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可以模块化。