《Pinia实战》8.核心概念 更真实的示例

欢迎观看《Pinia实战》视频课程

1. 1. 更真实的示例

这是一个更完整的 Pinia API 示例，在 JavaScript 中也使用了类型提示。对于某些开发者来说，可能足以在不进一步阅读的情况下直接开始阅读本节内容，但我们仍然建议你先继续阅读文档的其余部分，甚至跳过此示例，在阅读完所有核心概念之后再回来。

js

import { defineStore } from 'pinia'

export const useTodos = defineStore('todos', {

  state: () => ({

    /** @type {{ text: string, id: number, isFinished: boolean }[]} */

    todos: [],

    /** @type {'all' | 'finished' | 'unfinished'} */

    filter: 'all',

    // 类型将自动推断为 number

    nextId: 0,

  }),

  getters: {

    finishedTodos(state) {

      // 自动补全！ ✨

      return state.todos.filter((todo) => todo.isFinished)

    },

    unfinishedTodos(state) {

      return state.todos.filter((todo) => !todo.isFinished)

    },

    /**

     * @returns {{ text: string, id: number, isFinished: boolean }[]}

     */

    filteredTodos(state) {

      if (this.filter === 'finished') {

        // 调用其他带有自动补全的 getters ✨

        return this.finishedTodos

      } else if (this.filter === 'unfinished') {

        return this.unfinishedTodos

      }

      return this.todos

    },

  },

  actions: {

    // 接受任何数量的参数，返回一个 Promise 或不返回

    addTodo(text) {

      // 你可以直接变更该状态

      this.todos.push({ text, id: this.nextId++, isFinished: false })

    },

  },

})