Pinia 教程

Pinia 是 Vue 3 的官方状态管理库，它简化了 Vue 3 应用的状态管理。以下是一些关于 Pinia 的基本教程和示例。

快速开始

安装 Pinia：

npm install pinia

在 Vue 3 应用中使用 Pinia：

// store.js
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import pinia from './store';

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

基本使用

创建一个简单的 store：

// store.js
import { defineStore } from 'pinia';

export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

在组件中使用：

// Counter.vue
<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { useStore } from '@/store';

const store = useStore();
</script>

高级用法

模块化状态管理：将状态分割成不同的模块。
持久化：将状态持久化到本地存储。
插件扩展：使用插件扩展 Pinia 的功能。

更多信息，请参考官方文档：Pinia 官方文档

以上是 Pinia 的基本教程，希望对您有所帮助。如果您想了解更多关于 Vue.js 的内容，可以访问我们的 Vue.js 示例页面。