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>