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的作用一样就行了。