>[success] # pinia -- getter 1. 需要在`store`中定義了`getters`，在使用中常見的幾種場景 * 正常第一個`getter` 將其 理解為一個計算屬性用來配合`state` * 一個`getter`引入另外一個`getter` * 利用`getters`返回一個函數 * getters中用到別的store中的數據 2. `getters `中定義的函數也可以使用`this`，返回的為當前`store `對象，可以去調用對象中的`state `或者其他`getter`，但使用`this `時候在使用`ts` 會導致`ts `不能自動判斷類型 ~~~ export const useStore = defineStore('main', { state: () => ({ counter: 0, }), getters: { // 自動將返回類型推斷為數字 doubleCount(state) { return state.counter * 2 }, // 返回類型必須明確設置 doublePlusOne(): number { return this.counter * 2 + 1 }, }, }) ~~~ >[danger] ##### 案例 * store ~~~ import { defineStore } from "pinia"; // 第一個參數是應用程序中 store 的唯一 id export const useCountStore = defineStore("count", { // 其它配置項 state: () => ({ counter: 0, ls: [1, 12, 31, 48, 5], }), getters: { // 自動將返回類型推斷為數字 // 箭頭函數表現形式 doubleCount: (state) => state.counter * 2, doubleCount(state) { return state.counter * 2; }, // 也可也使用this 訪問state doublePlusOne() { console.log(this); return this.counter * 2 + 1; }, // 使用this 訪問getter doubleCountPlusOne() { // 自動完成 return this.doubleCount + 1; }, // 函數 getIndexBynunber(state) { return function (cnum) { return state.ls.findIndex((num) => cnum === num); }; }, // 想訪問其他store 中的值 只要把其他store 引入即可 import { useOtherStore } from './other-store' // otherGetter(state) { // const otherStore = useOtherStore() // return state.localData + otherStore.data // }, }, }); ~~~ * 視圖，使用上直接使用即可不用像`vuex `需要在聲明`getter.調用` ~~~html <template> <div> {{ doubleCount }}, {{ doublePlusOne }}, {{ doubleCountPlusOne }}, {{ getIndexBynunber(2) }} </div> </template> <script setup> import { storeToRefs } from "pinia"; import { useCountStore } from "@/store/modules/count"; // 使用創建的 defineStore 創建的 usersStore 函數 const { doubleCount, doublePlusOne, doubleCountPlusOne, getIndexBynunber } = storeToRefs(useCountStore()); </script> ~~~