Vuex如何获取getter对象中的值(包括module中的getter)

目录
  • Vuex获取getter对象中的值
    • 1.直接从根实例获取
    • 2.使用mapGetters取值
    • 3.使用module中的getter
  • 计算属性获取的getter值需要刷新才能更新
    • 描述
    • 解决

Vuex获取getter对象中的值

getter取值与state取值具有相似性

1.直接从根实例获取

// main.js中，把store注册在根实例下，可使用this.$stroe.getters直接取值
computed: {
  testNum1() {
    return this.$store.getters.testNum1;
  }
}

2.使用mapGetters取值

import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters({
      // 把 `this.getNum1` 映射为 `this.$store.getters.getNum1`
      getNum1: "getNum1"
    }),
    ...mapGetters([
      // 使用对象展开运算符将 getter 混入 computed 对象
      "getNum4"
    ])
  }
};

3.使用module中的getter

module中的getter，又分为namespaced（命名空间）为true和false的情况。默认为false,则表示方位都是全局注册，与上边两种方法一致。

当为true时，则使用如下方法：

import { mapGetters } from "vuex";
export default {
  computed: {
    getNum1(a,b) {
      return this.$store.getters['moduleA/getNum1']
    },
    // 第一个参数是namespace命名空间，填上对应的module名称即可
    ...mapGetters("moduleA", {
      getNum2: "getNum2"
    }),
    ...mapGetters("moduleA", ["getNum3"])
  }
};

计算属性获取的getter值需要刷新才能更新

描述

 // state
 state: {
    leader: null
 },
 // getters
 getters: {
    getLead: state => state.leader
 }
 // mutations
 mutations: {
    setLead (state, data) {
      state.leader = data
    }
 },
// 页面中赋值
// 登录时改变state.leader的值
this.$store.commit('setLead', true)
// 组件中计算属性监听
import { mapGetters } from 'vuex'
computed: {
   leader () {
     ...mapGetters(['getLead'])
   }
 }

打印this.leader，直接获取计算属性值

刷新之后的打印结果

解决

增加监听函数watch，修改计算属性

computed: {
     ...mapGetters(['getLead'])
     //原来
   		//leader () {
    	// ...mapGetters(['getLead'])
   		//}
 }
watch: {
    // 监听getters数据 --- 'getLead'
    // 解决state数据可以更新，但getters数据需要刷新才能更新的问题
    getLead (val) {
      this.leader = val
      // this.leader是data中自定义的值，
      // 赋值之后，一定要重写之后的方法，
      // 不然只是取值，页面操作依然不会改变
      this.showVip() // 这是我页面上的方法名
    }
  },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vuex中getters的使用教程

    详解Vuex中getters的使用教程

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

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

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

  • vuex中Getter的用法详解

    vuex中Getter的用法详解

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

  • vuex中...mapstate和...mapgetters的区别及说明

    目录 ...mapstate和...mapgetters的区别 …mapstate …mapGetters vuex mapState mapGetters用法及多个module下用法 一.mapState 二.mapGetters 三.mapActions.mapMutations ...mapstate和...mapgetters的区别 …mapstate 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮

  • 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 中辅助函数mapGetters的基本用法详解

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

  • Vuex如何获取getter对象中的值(包括module中的getter)

    Vuex如何获取getter对象中的值(包括module中的getter)

    目录 Vuex获取getter对象中的值 1.直接从根实例获取 2.使用mapGetters取值 3.使用module中的getter 计算属性获取的getter值需要刷新才能更新 描述 解决 Vuex获取getter对象中的值 getter取值与state取值具有相似性 1.直接从根实例获取 // main.js中,把store注册在根实例下,可使用this.$stroe.getters直接取值 computed: {   testNum1() {     return this.$store

  • MybatisPlus中插入数据后获取该对象主键值的实现

    实体对象 主键IdType要设置为AUTO 表示数据库ID自增 @Data @EqualsAndHashCode(callSuper = false) @Accessors(chain = true) public class Employee implements Serializable { private static final long serialVersionUID = 1L; @TableId(value = "id", type = IdType.AUTO) priv

  • 使用jQuery快速解决input中placeholder值在ie中无法支持的问题

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • springboot如何获取yml里面的属性值

    springboot如何获取yml里面的属性值

    目录 如何获取yml里面的属性值 开发环境 项目结构 pom依赖 springboot启动类 person.yml person.java Dog.java SpringbootDemoApplicationTests 控制台输出 获取.yml中自定义参数 通过@Value获取 通过@ConfigurationProperties(prefix = "weixinAndAli")注解 如何获取yml里面的属性值 开发环境 idea jdk1.8 项目结构 pom依赖 <?xml

  • Android主项目与Module中R类的区别详解

    前言 大家都知道 Android 项目中会通过自动生成一个 R.java 类的方式来保存项目中所有资源文件的标识.在主项目中生成的 R.java 中的资源声明是一个静态常量,而在 module 中它却是一个静态变量.这是为什么呢?我们知道在 java 中如果某个值被声明成常量(用 final 修饰),则在编译后,该常量会被直接替换成值.而在 java 语法中,注解的属性和 switch-case 中的 case 表达式,必须使用常量或者直接使用值,否则会报语法错误. 下面我们会展开讨论下为什么

  • vuex获取state对象中值的所有方法小结(module中的state)

    vuex获取state对象中值的所有方法小结(module中的state)

    目录 vuex获取state对象中的值 直接从store实例取值 使用mapState取值的多种方法 使用module中的state vuex调用state数据 第一种 第二种:利用计算属性 第三种:mapstate 数组 第四种:mapState 对象 第五种:mapState 对象 解构 追加变量 vuex获取state对象中的值 直接从store实例取值 // main.js中,把store注册在根实例下,可使用this.$stroe.state直接取值 export default {

  • Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

    目录 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 2. 原因 3.watch源码分析 4.doWatch源码分析 5.总结 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 <script lang="ts" setup> // 接受父组件传递的数据 const props = defineProps({ test: { type: String, default: '' } }) // 使用 watch 侦听 props 中的 test 属性

  • vue获取或者改变vuex中的值方式

    目录 vue获取或改变vuex的值 store–>index.js 在页面中使用或者修改vuex中的值 监听vuex值变化实时改变 问题如图 思路 vue获取或改变vuex的值 store–>index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { isLogin:localStorage.getItem("isLogin&

  • js中获取事件对象的方法小结

    js中获取事件对象的方法小结

    复制代码 代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在html的属性中写JS代码 复制代码 代码如下: <div onclick="alert(4);">Div1 Element</div> 大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的

  • JavaScript中获取Radio被选中的值

    原理就是:一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值. <form id="userlist" method="post" action="option.php"> <input type="radio" name="userid" value="1">1 <input type="radio" name=&quo

随机推荐