5、Vue 3 Pinia 使用实录：Getter

嗨，我是温新

getter 是 Pinia 中的一个重要概念，简单地讲，它类似 Vue 3 中的计算属性。

在 Setup 中，Getter 性质如下：

• ref() 是 state 属性
• computed() 是 getters
• function () 是 actions

Getter 基本使用

getter 使用 defineStore() 中的 getters 属性来定义。

1、定义 getter

src/stores/user.ts

import { defineStore } from "pinia";
import { computed, ref } from "vue";

const useUserStore = defineStore('user', () => {
  
    const username = ref("王美丽")
    const age = ref(18)

    const updateUsername = (uname:string) => {
        username.value = uname
    }

    const updateAge = (uage:number) => {
        age.value = uage
    }

    // 定义 getter
    const newUsername = computed(() => {
        return '我是 ' + username.value + ', 我 ' + age.value + '岁了'
    })

    return {
        username,
        age,
        updateUsername,
        updateAge,
        newUsername
    }
})


export default useUserStore

2、使用 getter

src/App.vue

<template>
  <h3>Vue 3 Pinia 使用实录</h3>
  <div class="main">
      <h3>{{ username }}</h3>
      <h3>{{ age }}</h3>
	  <h3>{{ newUsername }}</h3>
      <button @click="updateByUsername">修改名称</button>
      <button @click="updateUserage">修改年龄</button>
  </div>
  
</template>

<script setup lang="ts">
	import  useUserStore  from "@/stores/user.ts";
	import { storeToRefs } from 'pinia'

	const userStore = useUserStore()
	// 解构出 newUsername
	const { username, age, newUsername } = storeToRefs(userStore)
	const { updateUsername, updateAge } = userStore;
 
	const updateByUsername = () => {
		updateUsername("王丽丽")
	}
	const updateUserage = () => {
		updateAge(19)
	}
</script>

<style scoped>
.main {
  background-color: pink;
}
</style>

Getter 嵌套使用

1、修改仓库

src/stores/user.ts

import { defineStore } from "pinia";
import { computed, ref } from "vue";

const useUserStore = defineStore('user', () => {
	...

    const newUsername = computed(() => {
        return '我是 ' + username.value + ', 我 ' + age.value + '岁了'
    })

    // 嵌套使用 getter
    const newAge = computed(() => {
        return newUsername.value + (age.value >= 18 ? '成年' : '未成年')
    })

    return {
        username,
        age,
        updateUsername,
        updateAge,
        newAge
    }
})

export default useUserStore

2、使用 getter

src/App.vue

<template>
  <h3>Vue 3 Pinia 使用实录</h3>
  <div class="main">
	...
      
	<h3>{{ newAge }}</h3>
      
	...
  </div>
  
</template>

<script setup lang="ts">
	...
    
	const { username, age, newUsername,newAge } = storeToRefs(userStore)
	
    ...
</script>

...

getter 参数

1、修改仓库

import { defineStore } from "pinia";
import { computed, ref } from "vue";

const useUserStore = defineStore('user', () => {
	...

    const getUserAge = computed(() => {
        return (num:number) => age.value + num
    })


    return {
		// ...
        
        getUserAge
    }
})

export default useUserStore

2、使用 getter

src/App.vue

<template>
  <h3>Vue 3 Pinia 使用实录</h3>
  <div class="main">

      ...
      <!-- getter 参数使用 -->
	  <h2>{{  getUserAge(12) }}</h2>

      ...
  </div>
  
</template>

<script setup lang="ts">
	...
    
	const { updateUsername, updateAge, getUserAge } = userStore;
 
	...
</script>

...