Vue 3 & Pinia 状态管理（4） - Pinia Getters 的相关使用

嗨，我是温新，一名 PHPer。

本篇目标：了解什么是 Pinia

Pinia 官方文档：https://pinia.web3doc.top/introduction.html

本篇文章属于 pinia 小系列，因此，文件之间存在关联，若遇到不连贯的地方，请查看该系列文章。如本篇文章中有一个 child 组件，但是本篇文章没有对它进行编写。

Getters

官方解释：Getter 完全等同于 Store 状态的 计算值。

说人话，把它当做计算属性来看待和操作。

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

添加 getter

// src/stores/user.ts

import { defineStore } from 'pinia'
import {ref, computed} from 'vue'

export default defineStore('user', () => {
    const name = ref('自如初')
    const url = ref('https:/www.ziruchu.com')
    const age = ref(4)

	// 组合式 API 中，使用 计算属性来定义 getter
    const computedName = computed( () => {
    	return "我叫 " + name.value + "， 今年 " + age.value + ' 岁了';
    })

    return {name, url, age, computedName}
})

使用 getter

<template>
	<h3>信息：{{ userStore.computedName }}</h3>
</template>

使用的时候直接从仓库中取出该值就行了，也可以从仓库中解构出来直接使用。

getter 中使用其他的 getter

步骤一：仓库中添加 getter

// src/stores/user.ts

// 定义 getter
const computedName = computed( () => {
	return "我叫 " + name.value + "， 今年 " + age.value + ' 岁了 ';
})

// getter 中使用 gtter
const computedAge = computed(() => {
	return computedName.value + (age.value >= 18 ? '成年': '未成年')
})

步骤二：模板中使用

<!-- src/App.vue -->

<input type="number" v-model="age">
<h3>信息：{{ userStore.computedName }}</h3>
<h3>成年与否：{{  userStore.computedAge }}</h3>

getter 中传参

步骤一：仓库库添加 gtter

// src/stores/user.ts

// getter 中的参数
const getAge = computed(() => {
	return (num: number) =>  age.value + num
})

步骤二：模板中使用

<!-- src/App.vue -->

<h3>getter 中传递参数：{{ userStore.getAge(19) }}</h3>

完整代码

// src/stores/user.ts

import { defineStore } from 'pinia'
import {ref, computed} from 'vue'

// 组合式 API
export default defineStore('user', () => {
  const name = ref('自如初')
  const url = ref('https:/www.ziruchu.com')
  const age = ref(4)

  // 定义 getter
  const computedName = computed( () => {
    return "我叫 " + name.value + "， 今年 " + age.value + ' 岁了 ';
  })

  // getter 中使用 gtter
  const computedAge = computed(() => {
    return computedName.value + (age.value >= 18 ? '成年': '未成年')
  })

  // getter 中的参数
  const getAge = computed(() => {
    return (num:number) =>  age.value + num
  })

  return {name, url, age, computedName, computedAge, getAge}
})

<!-- src/App.vue -->

<template>
  <div>
    <h2>名称：{{ name }}</h2>
    <h2>网址：{{ url }}</h2>
    <h2>年龄：{{ age }}</h2>
    <input type="number" v-model="age">
    <button @click="changeName">修改名称</button>
    <button @click="changePatchStore">批量修改数据</button>
    <button @click="handleReset">重置</button>
   
    <h3>信息：{{ userStore.computedName }}</h3>
    <h3>getter 调用 getter：{{  userStore.computedAge }}</h3>
   
    <h3>getter 中传递参数：{{ userStore.getAge(19) }}</h3>
   
    <hr>
   <child></child>
  </div>
</template>

<script setup lang="ts">
  import { toRefs } from 'vue'
  import useUserStore from './stores/user'
  import child from './home/child.vue'

  const userStore = useUserStore()
  const {name, url, age,} = toRefs(userStore)

  const changeName = () => {
    userStore.name = '计算机导论'
  }

  // 批量修改
  const changePatchStore = () => {
    // userStore.$state = {name:"算法导论", age:19, url:"www.ziruchu.com"}
    userStore.$patch({name:"计算机科学导论"})
  }

  // 重置
  const handleReset = () => {
    userStore.$reset()
  }
</script>

选项式 API 和组合式 API 的使用方式有所不同，大家可以试试，下面是选项式 API代码：

// str/stores/common.ts

import { defineStore } from "pinia";

export default defineStore('common', {
    state: () => {
        return {
            name: '王美丽',
            age: 19
        }
    },
    getters: {
        getName: (state) => state.name = '郝帅'
    }
})

模板中引入使用

{{  commonStore.getName }}

<script setup lang="ts">
  import useCommonStore from './stores/common'
  const commonStore = useCommonStore()
</script>