Pinia详解 - 技术栈

文章目录

简介
特点
用法
- [1. 安装Pinia](#1. 安装Pinia)
- [2. 注册Pinia Store](#2. 注册Pinia Store)
- [3. 创建Pinia Store](#3. 创建Pinia Store)
- [4. 使用Pinia Store](#4. 使用Pinia Store)
区别

Vuex详解

Pinia是一个基于Vue 3的状态管理库，专为Vue 3设计。它提供了一种简单、直观且可扩展的方式来组织和访问应用程序的状态。Pinia的设计灵感来源于Vuex，但相比Vuex，Pinia更加轻量级、简单易用和灵活。Pinia利用Vue 3的新特性，如Composition API，使得开发者能够更容易地上手和使用。

简介

Pinia官网

特点

轻量级：Pinia不需要使用Vuex中的一些复杂概念，如模块和getter，因此更加轻量级。
简单易用：Pinia的API设计更加简单直观，特别是与Vue 3的Composition API紧密集成，使得开发者能够更快速地理解和使用。
模块化状态管理：Pinia支持将状态划分为不同的模块，提高了代码的可维护性和可扩展性。
状态订阅：Pinia允许开发者订阅状态的变化，并在状态发生变化时触发相应的回调函数。
类型安全：Pinia支持TypeScript，并提供了类型安全的API和开发体验，使得在开发过程中能够更好地捕获错误和进行静态类型检查。
支持异步操作：Pinia支持在actions中执行异步操作，如发送网络请求、处理副作用等。

用法

1. 安装Pinia

使用npm或yarn等包管理器安装Pinia库。

npm install pinia

yarn add pinia

2. 注册Pinia Store

在应用程序的入口文件中注册Pinia Store，以便它能够在整个应用程序中使用。

js 复制代码

// main.js  
import { createApp } from 'vue'  
import { createPinia } from 'pinia'  
import App from './App.vue'  
  
const app = createApp(App)  
  
// 创建一个 Pinia 实例  
const pinia = createPinia()  
  
// 使用 Pinia  
app.use(pinia)  
  
app.mount('#app')

3. 创建Pinia Store

使用 defineStore 函数来创建一个Pinia Store，定义状态、getters 和 actions 等。

接下来，定义一个 Pinia store 来管理一个简单的计数器状态：

js 复制代码

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

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', {
    // store 的数据 (data)
    state: () => ({
        count: 0
    }),
    
    // getters 是 store 的计算属性 (computed)
    getters: {
        // 可以通过 this 访问 state  
        doubleCount: (state) => state.count * 2
    },
    
    // actions 则是方法 (methods)
    actions: {
        increment () {
            this.count++
        },
        decrement () {
            if (this.count > 0) {
                this.count--
            }
        },
        // 异步操作示例  
        async fetchCountFromApi () {
            // 假设我们从一个 API 获取新的计数  
            const response = await fetch('https://api.example.com/count')
            const data = await response.json()
            this.count = data.count
        }
    }
    
})

4. 使用Pinia Store

在Vue组件中通过 useStore 函数来访问和使用 Pinia Store 中的状态。

html 复制代码

<!-- App.vue -->
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <p>Double Count: {{ counterStore.doubleCount }}</p>
        <button @click="counterStore.increment">Increment</button>
        <button @click="counterStore.decrement" :disabled="counterStore.count <= 0">Decrement</button>
        <!-- 假设我们有一个按钮来触发 API 调用 -->
        <button @click="counterStore.fetchCountFromApi">Fetch Count from API</button>
    </div>
</template>

<script>
    // 导入并使用 Pinia store
    import { useCounterStore } from './stores/counter';

    export default {
        setup() {
            // 使用 store
            const counterStore = useCounterStore();

            // 返回需要在模板中使用的响应式数据和方法
            return {
                counterStore
            };
        }
    };
</script>

上例中，导入这个 store，并在模板中使用了它的状态和方法。还添加了一个按钮来触发一个模拟的 API 调用，以更新计数器的值。

区别

特性	Vuex	Pinia
设计原则	Flux-like	更接近 Vue 3 的 Composition API
版本兼容性	Vue 2, Vue 3	主要针对 Vue 3
状态管理	使用全局单一的 Store 来管理应用的状态	使用独立的 store（与组件类似）来管理状态
状态结构	模块化的，通过命名空间区分	每个 store 都是独立的，易于测试和复用
Mutations	强制使用，用于同步更新状态	不需要 mutations，直接通过 actions 或 state 的直接赋值来更新状态
Actions	用于异步操作或包含任意副作用的操作	类似于 Vuex 的 actions，但更简洁，可以直接在 actions 中修改状态
Type Safety	需要额外的工具或插件来支持	天然的 TypeScript 支持，提供更好的类型安全
插件系统	支持插件扩展	支持通过 middleware（中间件）或 plugins（插件）来扩展功能
热模块替换 (HMR)	支持，但需要额外配置	支持，集成在 Pinia 内部
开发体验	需要额外的学习成本，尤其是 mutations 的使用	接近 Vue 3 的 Composition API，学习成本低
体积	相对较大，包含额外的功能和抽象	较小，只包含核心功能
社区支持	成熟的社区和大量的教程/文档	相对较新的项目，但正在迅速获得支持
适用场景	大型、复杂的应用	中小型到大型应用，尤其是需要更灵活状态管理的场景