pinia中的getter和vue中计算属性一样，它可以在获取state的值时做一些处理。
我们还是以实际的例子来学习，在前面写的例子中，我们有显示用户的手机号码，现在有一个新需求，就是显示用户的手机号码时，中间四位要变成星号，这样来保护一些用户的隐私。
这个时候，我们就可以定义一个getter，由它来处理手机号码：
import { defineStore } from 'pinia'
import { loginApi } from '../api/login'
export const useProfileStore = defineStore('profile', {
state() {
return {
userName: '',
phone: '',
avatar: '',
}
},
actions: {
login(userName, password) {
loginApi(userName, password)
.then((res) => {
this.$patch({
userName: res.userName,
phone: res.phone,
avatar: res.avatar,
})
})
.catch((err) => {
console.log(err)
})
},
},
getters: { // 新增
phoneHidden(state) {
return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
},
},
})
我们在App.vue的模板中绑定的值就要改成phoneHidden了
<template>
<div>用户名是： {{ profileStore.userName }}</div>
<div>手机号是： {{ profileStore.phoneHidden }}</div>
</template>
页面上显示：
用户名是： 林哥
手机号是： 188****8888
这就是getter的基本用法了，是不是跟computed一样
getter接受参数
现在我们又增加了一个需求，手机号码要显示区号，比如我们中国区的区号是+86，这个区号需要通过参数传给getter，
这时候，getter就不是直接返回一个值了，而是返回一个函数，这个函数接收参数：
getters: {
phoneHidden(state) {
return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
},
phoneHiddenPlus() { // 新增
return (prefix) => prefix + this.phoneHidden
},
},
在App.vue中使用这个getter时，要把它当做参数来调用
<template>
<div>用户名是： {{ profileStore.userName }}</div>
<div>手机号是： {{ profileStore.phoneHiddenPlus('+86') }}</div>
</template>
这时，页面上显示：
用户名是： 林哥
手机号是： +86188****8888
在这个例子中，我们看到的phoneHiddenPlus这个getter中，直接使用this可以访问到这个store中的其他getter。
getter的使用就是这些了，记住和computed的作用一样就行了。
