pinia 核心模块 --- getter
一、概念
getters是defineStore参数配置项里面的另一个属性，前面我们讲了state属性。getter属性值是一个对象，该对象里面是各种各样的方法。大家可以把getter想象成Vue中的计算属性，它的作用就是返回一个新的结果，既然它和Vue中的计算属性类似，那么它肯定也是会被缓存的，就和computed一样。
二、getter基本使用
1、在user模块定义计算属性
// 引入defineStore 方法
import { defineStore } from "pinia";
/**
* pinia中使用defineStore定义store
* 第一个参数是应用程序中 store 的唯一 id
* 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
*
* 返回一个函数使用use+模块名命名
*/
export const useUserStore = defineStore("user", {
// 其它配置项
/**
* 定义当前的模块的state
* state是一个函数，必须有返回值
* 返回值就是这个模块的状态
* @returns
*/
state() {
// 返回age为1
return {
/**
* 年龄
*/
age: 1,
};
},
/**
* 计算属性在getters对象中定义
* 定义一个方法，方法必须有返回值，返回的值就是这个数算属性的结果
*
* 方法接收一个参数，为当前的state
*/
getters: {
// 两倍年龄
doubleAge: (state) => state.age * 2,
},
});
2、页面中使用
<template>
<div>
<!-- 页面上可以直接使用 -->
你好，我是pinia--{{ userStore.age }}
计算属性--{{userStore.doubleAge}}
<button @click="add">+1</button>
</div>
</template>
<script setup lang="ts">
// 引入定义的userStore模块
import { storeToRefs } from "pinia";
import { useUserStore } from "./store/user";
// 使用userStore 并返回定义模块的实例
const userStore = useUserStore();
/**
* 每次修改计算属性里所依赖的值
* 计算属性会自动的重新计算
*/
const add = () => {
userStore.age+=1
};
</script>
三、getter中调用其它getter
在页面上使用并无不同
// 引入defineStore 方法
import { defineStore } from "pinia";
/**
* pinia中使用defineStore定义store
* 第一个参数是应用程序中 store 的唯一 id
* 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
*
* 返回一个函数使用use+模块名命名
*/
export const useUserStore = defineStore("user", {
// 其它配置项
/**
* 定义当前的模块的state
* state是一个函数，必须有返回值
* 返回值就是这个模块的状态
* @returns
*/
state() {
// 返回age为1
return {
/**
* 年龄
*/
age: 1,
name: "张三"
};
},
/**
* 计算属性在getters对象中定义
* 定义一个方法，方法必须有返回值，返回的值就是这个数算属性的结果
*
* 方法接收一个参数，为当前的state
*/
getters: {
// 两倍年龄
doubleAge: (state) => state.age * 2,
/**
* 我们可以直接在getter方法中调用this，
* this指向的便是store实例，
* 所以理所当然的能够调用到其它getter。
* 注意：不能使用箭头函数的形式, 并且注意要写类型
*/
getNameAdnAge (): string {
return this.doubleAge + this.name
}
},
});
四、getter传参
既然getter函数做了一些计算或者处理，那么我们很可能会需要传递参数给getter函数，但是我们前面说getter函数就相当于store的计算属性，和vue的计算属性差不多，那么我们都知道Vue中计算属性是不能直接传递参数的，所以我们这里的getter函数如果要接受参数的话，也是需要做处理的
1、在user模块添加一下代码
// 引入defineStore 方法
import { defineStore } from "pinia";
/**
* pinia中使用defineStore定义store
* 第一个参数是应用程序中 store 的唯一 id
* 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
*
* 返回一个函数使用use+模块名命名
*/
export const useUserStore = defineStore("user", {
// 其它配置项
/**
* 定义当前的模块的state
* state是一个函数，必须有返回值
* 返回值就是这个模块的状态
* @returns
*/
state() {
// 返回age为1
return {
/**
* 年龄
*/
age: 1,
name: "张三"
};
},
/**
* 计算属性在getters对象中定义
* 定义一个方法，方法必须有返回值，返回的值就是这个数算属性的结果
*
* 方法接收一个参数，为当前的state
*/
getters: {
getAddAge () {
/**
* 在计算属性内部，返回一个方法
* 该方法会接收一个参数，这个参数就是
* 页面传过来的参数
*/
return (num: number) => this.age + num;
}
},
});
2、页面中使用
<div>
<!-- 页面上使用的时候，需要进行传参 -->
你好，我是pinia--{{ userStore.getAddAge(100) }}
<button @click="add">+1</button>
</div>
</template>
