Pinia四和使用getters
Getters
-
getters
就像计算属性一样, 通过defineStore
的getters
配置项来定义. 每一个getter
都是一个函数, 这个函数接收state
作为第一个参数, 官网鼓励使用箭头函数-
export const userStore = defineStore('user', { state: () => { return { color: 'red' as string, userList: [] as UserInfo[], user: { name: 'tom', age: 18 } as UserInfo | null } }, getters: { doubleAge: (state) => { return state.user.age * 2; } } })
- 大多数时间,
getter
都仅仅依赖于state
, 但是有时候也会依赖其他getter
. 所以呢, 如果getter
定义为非箭头函数就可以通过this
拿到整个store
实例, 但是由于TS
又必须为函数返回值定义类型. 但是这并不影响将getters
定义为箭头或者, 也不影响不使用this
的getters
-
getters: { doubleAge: (state) => { return state.user.age * 2; }, doubleAgePlus3(): number { return this.doubleAge 3; } }
-
-
-
在页面或者组件使用
getters
- 直接通过
store
实例对象-
import { userStore } from '../store/user'; const user = userStore();
-
<h2>{{ user.color }} | 【{{ user.doubleAge }}】</h2>
-
- 直接通过
-
向
getters
传递参数-
getters
可以通过返回一个函数A
来接收参数, 这个A
的返回值也就是getter
的值.-
getters: { plusAgeBy: (state) => { return (moreAge: number) => state.user.age moreAge } }
-
<h2>{{ user.color }} | 【{{ user.doubleAge }}】 | 【{{ user.plusAgeBy(10) }}】</h2>
-
-
📕如果传递参数,
getters
就不会再缓存了❗❗❗.
-
-
使用其他
store
中的getters
- 直接在
getter
内部使用即可 -
import { useCounterStore } from './index' getters: { addCounterFromOtherStore: (state) => { const useCounter = useCounterStore(); return state.user.age useCounter.count; } }
-
<h2>{{ user.addCounterFromOtherStore }}</h2>
- 直接在
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhhcjghj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22