九、Pinia 入门：Vuex 的轻量级替代方案

一、引言

随着 Vue 3 的发布，状态管理工具不断发展。Pinia 作为 Vuex 的轻量级替代方案，以简洁 API 和强大功能，成为 Vue 开发者新选择。本文详细介绍 Pinia 使用方法，对比其与 Vuex 的优劣及适用场景。

二、Pinia 简介

2.1 定义

Pinia 是基于 Vue 3 的状态管理库，由 Vue 核心团队成员开发，旨在提供简单直观的状态管理方案，保持与 Vuex 相似开发体验。

2.2 优势

• API 简洁：设计直观，降低学习成本。
• TypeScript 支持佳：天生支持，提供良好类型推断和开发体验。
• 轻量：体积小于 Vuex，适合中小型项目。
• 模块化设计：Store 天然模块化，无需额外配置。

三、Pinia 基本用法

3.1 安装

通过 npm 或 yarn 安装：

npm install pinia
# 或
yarn add pinia

3.2 创建 Store

示例如下：

// stores/counter.js
import {
   
    defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
   
   
  state: () => ({
   
   
    count: 0,
  }),
  actions: {
   
   
    increment() {
   
   
      this.count++;
    },
    decrement() {
   
   
      this.count--;
    },
  },
  getters: {
   
   
    doubleCount: (state) => state.count * 2,
  },
});

3.3 在应用中使用

在 main.js 中安装插件：

// main.js
import {
   
    createApp