首页 > 其他分享 >VUEX 使用学习五 : getter

VUEX 使用学习五 : getter

时间:2023-02-21 14:33:59浏览次数:52  
标签:数据 getters 学习 state getter 模块 VUEX store 属性

转载请注明出处:

  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

 



标签:数据,getters,学习,state,getter,模块,VUEX,store,属性
From: https://blog.51cto.com/u_15535797/6076571

相关文章

  • gin框架学习
    Gin框架web开发本质gomodinit项目名packagemainimport( "fmt" "io/ioutil" "net/http")funcsayHello(whttp.ResponseWriter,r*http.Request){ b,_:=i......
  • python+playwright 学习-3.页面操作Action
    前言Playwright可以与HTML输入元素交互,例如文本输入、复选框、单选按钮、选择选项、鼠标单击、键入字符、键和快捷方式以及上传文件和焦点元素。fill()输入文字使用......
  • Python 学习记录
    前言Python3.5安装步骤Python官网Pycharm第一个程序.pyprint("hellopython")基本语法type(a)=数据类型整数(在线进制转换)定义a=12Python可以......
  • python+playwright 学习-2.Selector 选择器定位元素
    前言Selector选择器,也就是通常说的元素定位了,页面上点点点的操作,都是基于元素定位,所以这块是重点需要学的核心内容。Selector选择器说到元素定位,大家肯定会首先想到s......
  • 系统性能调优学习笔记04
    使用cgroup管理资源限制1、管理资源限制1.1使用ulimit限制系统资源限制系统资源早期使用的方法是ulimit命令,设置的限制是系统范围的,并在登录和会话启动时由PAM模块进行验证......
  • JWT学习笔记
    JWT学习笔记JWT介绍jwt官网:https://jwt.io/百度:JWT(JSONWEBToken)的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也......
  • git,repo学习
    Repo:就是一组git命令的集合,repoinit下载一个分支。repostart文件名--all本地传建的另一个代码分支,用于备份作用。比如:repostartzhao--allgit brach查看当前......
  • 如何通过使用vscode工具学习ts(typescript)
    1如果有vscode工具可自行忽略这条;如果没有vscode工具,可进入官网http://vscode.p2hp.com/进行下载,下载过程可自行百度。2D盘新建文件夹随意命名为TS-LEAN,然后再【终端】......
  • VUEX 使用学习三 : mutations
    转载请注明出处:在Vuex中store数据改变的唯一方法就是提交 ​​mutations​​​。​​mutations​​​里面装着一些改变数据方法的集合,这是Vuex设计很重要的一点,就......
  • VUEX 使用学习四 : action
    转载请注明出处:action用于处理异步任务;​​action​​,可以操作任意的异步操作,类似于​​mutations​​,但是是替代​​mutations​​来进行异步操作的。首先​​mutatio......