数据仓库getter的应用

假设你有一个pinia store定义如下：

import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state: () => ({
    tableList: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ]
  }),
  getters: {
    getTableList: (state) => state.tableList
  }
});

在组件中应用：

<template>
  <div>
    <!-- 使用解构赋值后的 tableList -->
    <ul>
      <li v-for="item in tableList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useMyStore } from '../stores/myStore';
import { storeToRefs } from 'pinia';

// 直接在解构赋值时调用 useMyStore()
const { getTableList: tableList } = storeToRefs(useMyStore());
</script>

注意，以上这种应用，是将getTableList解构成了响应式变量，如果不想解构成响应式的变量，可以像这样用：

<template>
  <div>
    <!-- 使用解构赋值后的 tableList -->
    <ul>
      <li v-for="item in tableList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useMyStore } from '../stores/myStore';
import { storeToRefs } from 'pinia';

// 直接调用 useMyStore()。但是tableList是非响应式的
const tableList = useMyStore().getTableList;
</script>

如何在仓库action中用呢：

import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state: () => ({
    tableList: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ]
  }),
  getters: {
    getTableList: (state) => state.tableList
  },
  actions:{
    // 定义一个 action 方法来调用 getter 中的 getTableList
    callGetterGetTableList() {
      // 通过 this 访问 getters 中的 a 方法
      const result = this.getTableList;
      console.log('调用 getter getTableList 的结果:', result);
      return result;
    }
  }
});

基本用法就是这样。像getter里面，也可以这样定义属性：

import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state: () => ({
    tableList: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ]
  }),
  getters: {
    getTableList(){return this.tableList}
  }
});

也可以输入变量：

getters 里可以放置任意数量的计算属性。getters 本质上是一个对象，你可以根据需求定义多个不同名称的计算属性。不过，为了保证代码的可读性和可维护性，建议根据功能将相关的计算逻辑组织在一起，避免 getters 过于庞大和复杂。
下面是一个包含多个 getters 的示例：

import { defineStore } from 'pinia';

export const useMoreGettersStore = defineStore('moreGettersStore', {
  state: () => ({
    numbers: [1, 2, 3, 4, 5]
  }),
  getters: {
    sum: (state) => state.numbers.reduce((acc, num) => acc + num, 0),
    average: (state) => state.numbers.length > 0 ? state.sum / state.numbers.length : 0,
    max: (state) => Math.max(...state.numbers),
    min: (state) => Math.min(...state.numbers)
  }
});

getter和actions有什么区别呢？后面有时间再分析。