Frontend Academy · 课时

Pinia for Vue：defineStore 与 storeToRefs

使用 defineStore 定义 Pinia 仓库，在组件中访问它，并使用 storeToRefs 在解构状态时保持响应性。

第 3 / 4 课13 个步骤

Pinia for Vue：defineStore 与 storeToRefs 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 Pinia？

Pinia 是 Vue 3 的官方状态管理库。它用更简单、类型安全且集成 DevTools 的 API 替代 Vuex，使用体验类似组合式 API。

安装 Pinia

安装 Pinia 插件，并将其注册到 Vue app 中。

npm install pinia

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

defineStore——组合式 API 风格

defineStore 会创建一个 store。组合式 API 风格直接使用 ref、computed 和函数——就像组合式函数一样。

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);
  function increment() { count.value++; }
  return { count, doubled, increment };
});

defineStore——选项式风格

选项式风格与 Vue 的选项式 API 相似：使用 state() 定义响应式数据，使用 getters（类似 computed）和 actions（类似 methods）。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubled: (state) => state.count * 2,
  },
  actions: {
    increment() { this.count++; },
    async fetchAndSet(id: string) {
      this.count = await fetchCount(id);
    }
  }
});

在组件中使用 store

在 setup() 内部调用 store 钩子。store 是一个响应式对象，您可以直接读取状态并调用操作。

<script setup>
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();
</script>

<template>
  <p>{{ store.count }}</p>
  <button @click="store.increment">+</button>
</template>

storeToRefs——安全解构

直接解构 store 会使状态和 getters 失去响应性（它们会变成普通值）。请使用 storeToRefs() 进行响应式解构。

import { storeToRefs } from 'pinia';

const store = useCounterStore();

// Actions can be destructured normally (they're functions):
const { increment } = store;

// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);

$patch——批量更新

store.$patch() 会将多个状态更改作为一次操作应用。适合批量处理相关更新。

store.$patch({
  count: 10,
  name: 'Updated'
});

// Or with a function for complex logic:
store.$patch(state => {
  state.items.push(newItem);
  state.total += newItem.price;
});

$subscribe——监听 store 变化

store.$subscribe(callback) 会响应 store 的任何变更，类似于 Vue 的 watch，但作用于整个 store。

Pinia 插件

Pinia 插件会扩展每个 store。常见用途包括将状态持久化到 localStorage、添加调试日志记录，或注入服务。

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

Pinia DevTools

Pinia 与 Vue DevTools 集成。您可以检查存储状态，查看调用了哪些操作，并在不同状态快照之间进行时间旅行。

多个存储

为每个领域创建一个存储（useAuthStore、useCartStore、useNotificationStore）。存储可以相互导入和使用。Pinia 的扁平结构（没有嵌套模块）使这一过程很简单。

快速检查

对 Pinia 存储进行解构时，为什么应该使用 storeToRefs()？

在交互式课程中回答

回顾：Pinia

defineStore 用于创建存储。支持组合式 API 或选项式 API 风格。通过 useXxxStore() 钩子访问。使用 storeToRefs() 进行响应式解构。使用 $patch() 批量更新。使用插件实现持久化和其他扩展。集成 DevTools。每个领域使用一个存储——没有 Vuex 风格的嵌套模块。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「Pinia for Vue：defineStore 与 storeToRefs」课时是免费的吗？

是的 — 「Pinia for Vue：defineStore 与 storeToRefs」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Pinia for Vue：defineStore 与 storeToRefs」这节课中我会学到什么？

使用 defineStore 定义 Pinia 仓库，在组件中访问它，并使用 storeToRefs 在解构状态时保持响应性。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Pinia for Vue：defineStore 与 storeToRefs」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

Redux Toolkit：createSlice 与 configureStore
使用 Zustand 管理轻量级 React 状态
Pinia for Vue：defineStore 与 storeToRefs
何时使用全局状态与本地状态

← 返回 Frontend Academy