VUEX 使用学习五 : getter

简介: VUEX 使用学习五 : getter

转载请注明出处:

  Getter对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据,起到的是包装数据的作用;

  有时我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数

  如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它(无论哪种方式都不是很理想)。getter就是为了解决这个问题而产生的。

应用场景:

  1. 相当于state的计算属性(基于State处理成另外一份数据)

  2. 模板中需要的数据和State中的数据不完全一样;需要基于state中的数据进行加工处理,形成一份新的的数据,给模板使用

特点:

  1. Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。

  2. Store 中数据发生变化,Getter 的数据也会跟着变化。

  3. getters不会修改state中的数据

使用:

  1.第一 种方式:this.$store.getters.名字 是调用getters第一 种方式

//组件中调用
 {{$store.getters.计算属性名}}                      // 不分模块
 {{this.$store.getters['模块名/计算属性名']}}       // 分模块
 
//store.js中定义
   getters: {
    showNum (state){
      return `当前最新的数据${state.count}`
    }
  }
  1. 通过以函数映射的方式
// 1.从vuex中按需求导入mapState函数
import {maptGetters} from 'vuex'
// 通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
// 2. 将指定的mutations函数,映射为当前组件的methods函数
computed :{ 
    ...maptGetters(['showNum']) 
    // 不分模块
    ...mapGetters(['计算属性名'])
    // 分模块,不重命名计算属性
    ...mapGetters('模块名', ['计算属性名'])
}
// 3.直接使用mapGeterrs中声明的属性

  

    在网上找到一个demo 示例,可参考学习: https://gitee.com/xiangbaxiang/vue-store

 

标签: Vue学习使用

目录
相关文章
|
6月前
|
JavaScript
vue的computed中的getter和setter
vue的computed中的getter和setter
|
JavaScript 前端开发
Vue的getter和setter方法是干什么的?底层原理是什么?
Vue的getter和setter方法是干什么的?底层原理是什么?
653 0
|
2月前
|
缓存 JavaScript API
Vue3— computed的实现原理
【9月更文挑战第5天】Vue3— computed的实现原理
85 10
|
3月前
|
JavaScript API 开发者
关于维护vue3的响应式的那些事:unref、toRef、toRefs、toRaw、toValue
总结:Vue 3的Composition API提供的这些工具,大大增强了我们对响应式状态的操作能力,让状态管理变得更为灵活和高效。`unref`、`toRef`、`toRefs` 以及 `toRaw` 各有其用途和应用场景,灵活应用这些工具,将有助于开发出更为强大和响应式的Vue应用。在开发过程中,正确区分和使用这些API,能够有效提高开发效率以及应用的性能。
117 0
|
4月前
|
存储 JavaScript 前端开发
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
108 0
|
6月前
|
存储
vuex 有哪几种属性?
vuex 有哪几种属性?
|
6月前
|
JavaScript API
Vue之数据代理(getter、setter)
Vue之数据代理(getter、setter)
|
6月前
|
JavaScript
Vue状态管理:什么是getters?Vuex中的getters有什么作用?
Vue状态管理:什么是getters?Vuex中的getters有什么作用?
201 3
|
存储 缓存 JavaScript
vuex有哪几种属性?
vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便整个程序中的任何组件直接获取或修改我们的公共数据。
|
JavaScript API
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
119 0