Vuex中getters和actions的使用补充说明

前置说明

1.Vue2.x 和 Vue3.x区别:

  • 在Vue3.x中, 没有辅助函数.
  • 其他关于Vuex的使用没有区别.

2. 此处只对于Vuex的几个属性中的使用做扩展补充.

getters补充

当getters写在子模块中时, getters属性中的方法, 全参共有4个参数

getters: {
	/**
	  * 形参说明:
	  * state:       表示当前模块中的satate
	  * getters:     表示当前模块中的getters对象, 一般是操作同级的其他方法
	  * rootState:   表示主模块的satate对象
	  * rootGetters  表示主模块的getters对象
	  *
	  *  主模块也就是-index.js中
	  */
	getName(state, getters, rootState, rootGetters){
		// 使用说明
		// state、getters直接调用即可
		// rootState.模块名.属性名
		// rootGetters['模块名/该子模块下的getters方法名']
		// 除了state使用.调用以外, 其他都是用[''],符合命名规范的问题
	},
	.......
}

actions补充

当actions写在子模块中时, actions中的方法, 第一个形参 context对象中, 会有6个对象(还有别的属性, 只有这6个提供给开发者使用)

定义

// 子模块中的actions
actions: {
	/**
	  * 参数一: context 是一个对象, 如果当前actions定义在子模块中,
	  * 	   context中会有以下6个提供给开发者使用的对象
	  *
	  * 	1. commit:调用mutations
	  * 		(1).本模块调用：commit('本模块mutations方法名', 实参)
	  * 		(2).其它模块调用:commit('模块名/其它模块的mutations方法名', 实参,{root:true}),
	  * 			{root:true}固定参数, 表示作为主模块去调用的意思
	  * 	2. state:获取当前模块的state
	  * 	3. dispatch:调用actions方法
	  * 		(1).本模块调用：dispatch('本模块的actions方法名', 实参)
	  * 		(2).其它模块的调用：dispatch('模块名/其它模块的actions方法名',null,{root:true})
	  * 	4. getters:获取当前模块的getters
	  * 	5. rootState:主模块下的state
	  * 	6. rootGetters:主模块下的getters
	  *
	  * 参数二: value是组件中调用时传递的参数
	  */
	refreshUserName(context, value){
	    setTimeout(()=>{
           store.commit('mutations方法名',实参值)
       },2000)
	}
}

调用(Vue3.x)

import {useStore} from 'vuex'
setup(){
    const store=useStore()
    // store===this.$store
    store.dispatch('模块名/actions方法名',参数值)
}

开发中, 如果要使用上述6个对象, 都必须通过 context.来获取需要的对象, 可以通过解构, 直接获取

以下是官网的示例:

以上就是Vuex中getters和actions的使用补充说明的详细内容，更多关于Vuex中getters和actions使用补充的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简单的应用:这是一些简单的vue的小组件方法: http://www.jb51.net/article/138230.htm) 何为四大金刚? 1.State (这里可以是 小写的 state,跟官网保持一致,采用大写,因为个人习惯,后面的代码介绍采用小写) vuex的状态管理,需要依赖

  • vuex中Getter的用法详解

    vuex中Getter的用法详解

    前言 Vuex 允许我们在 store 中定义"getter"(可以认为是 store 的计算属性).就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 以官网的例子来说明,官网代码如下: 在组件中使用以下代码访问: this.$store.getters.doneTodosCount 一.说明 getters中的访问器函数,默认会传递2个参数(state, getters),使用第一个参数state可以访问数据,使用gett

  • vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数 mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: 1.在组件或界面中不使用mapGetter调用映射vuex中的getter 1.1 调用映射根部store中的getter <!-- test.vue --> <template> <div class="vuexReponse"> <div @click="changeVal">点击</di

  • vuex2中使用mapGetters/mapActions报错的解决方法

    解决方案 可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread . 接着在babel的配置文件 .babelrc 中应用插件: { "presets": [ ["es2015", { "modules": false }] ], "plugins": ["transform-object

  • 说说Vuex的getters属性的具体用法

    什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 源码分析 wrapGetters初始化getters,接受3个参数,store表示当前的Store实例,moduleGetters

  • 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

  • 对vuex中getters计算过滤操作详解

    getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的: getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5

  • vuex 多模块时 模块内部的mutation和action的调用方式

    vue在做大型项目时,会用到多状态管理,vuex允许我们将store分割成多个模块,每个模块内都有自己的state.mutation.action.getter.模块内还可以继续嵌套相对应的子模块. 为了巩固我自己对store多模块的一些基本认识,写了个简单的多模块实例,下图为我自己创建的store的目录结构,modules文件夹内的模块,在实际项目中还可以继续分开类似store目录下的多文件结构,也就是单独的模块文件夹,方便后期修改. store目录结构 ./store/index.js的代码

  • Vuex中getters和actions的使用补充说明

    Vuex中getters和actions的使用补充说明

    前置说明 1.Vue2.x 和 Vue3.x区别: 在Vue3.x中, 没有辅助函数. 其他关于Vuex的使用没有区别. 2. 此处只对于Vuex的几个属性中的使用做扩展补充. getters补充 当getters写在子模块中时, getters属性中的方法, 全参共有4个参数 getters: { /** * 形参说明: * state: 表示当前模块中的satate * getters: 表示当前模块中的getters对象, 一般是操作同级的其他方法 * rootState: 表示主模块的s

  • Vuex中mutations与actions的区别详解

    区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用 devtools 追踪状态变化. 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步竞态怎么处理那是用户自己的事情. vuex 真正限制你的只有 mutation 必须是同步的这一点(在 redux 里面就好像 reducer 必须同步返回下一个状态一样).同步的意义在于这样每一个 mutation 执

  • 详解Vuex中getters的使用教程

    详解Vuex中getters的使用教程

    目录 简介 说明 官网 getters概述 说明 来源 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:getters. 官网 Getter | Vuex API 参考 | Vuex getters概述 说明 getters 是Store的计算属性,可以对State进行计算操作.就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 虽然组件内也可以做计算属性,但getters 可以在多组件之间复用.如果一个状态只在一个

  • Vuex中mutations和actions的区别及说明

    目录 mutation Mutation 必须是同步函数 Action 在实际开发的store文件中 总结 mutation 我们知道,在使用vuex对项目状态进行管理时,只能使用commit来提交mutation对store中的状态进行更改 Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数: const

  • vuex中getters的基本用法解读

    目录 getters的基本用法解读 一.getter 定义 二.使用方法 三.mapGetters辅助函数 四.getters注意事项 getters的两种调用方法 方法一 方法二 getters的基本用法解读 一.getter 定义 Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作. 就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算 二.使用方法 1.通

  • vuex通过getters访问数据为undefined问题及解决

    vuex通过getters访问数据为undefined问题及解决

    目录 getters访问数据为undefined问题 写一个类似例子 vuex getters(组件mounted调用)使用注意 逻辑 解决方案 getters访问数据为undefined问题 本篇文章可能对你的帮助不大, 只是个人开发中的一些记录.不同的业务和应用场景可能问题不同. 在通过 uni-app 开发商城时,用户快捷登录之后,服务器返回一个 token 数据,我将其同步到 vuex module下的 user 模块中. 然后从登录页返回到用户页,并发起 http 请求,获取用户的个人

  • Vuex中actions的使用教程详解

    Vuex中actions的使用教程详解

    目录 简介 说明 官网 actions概述 说明 特点 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:actions. 官网 Action | Vuex API 参考 | Vuex actions概述 说明 Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数. 特点 1.异步操作,通过m

  • Vuex中actions优雅处理接口请求的方法

    目录 前言 文件结构 前言 在项目开发中,如果使用到了 vuex,通常我会将所有的接口请求单独用一个文件管理,而业务逻辑写在 actions 中,一方面方便统一管理项目中的所有请求,其次代码结构更加清晰,最重要的是可以全局性的处理一些统一的业务逻辑,例如接口入参调整等一些项目中通用的代码. 文件结构 在项目中完整的一套流程大致可以分为三部分: 1.api.js这个文件通常只用来存放项目中用到的所有接口,可以理解为接口 url 的管理文件.简单的请求示例如下: import request fro

  • 在Vuex中Mutations修改状态操作

    上篇是读取state,这篇是修改状态.即如何操作Mutations. 一. $store.commit( ) Vuex提供了commit方法来修改状态 1.store.js文件 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } } 2.在button上的修改方法 <button @click="$store.commit('add')">+</button>

随机推荐