vue2&3更简单实用的状态管理--pinia，一、安装并实现demo

最新推荐文章于 2025-07-02 17:56:51 发布

原创最新推荐文章于 2025-07-02 17:56:51 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

Pinia是Vue的状态管理工具，与VueX相比提供更简单API和类型推断支持。它不再需要mutations，直接支持TS，且取消了模块嵌套，采用平面结构。本文介绍了Pinia的安装、基本概念，以及如何定义和使用store，适合需要全局状态管理和了解VueX转换Pinia的开发者阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Pinia（发音为 /piːnjʌ/，类似于英语中的“peenya”），菠萝实际上是一组单独的花朵，它们结合在一起形成多个水果。与 Store 类似，每一家都是独立诞生的，但最终都是相互联系的。

与VueX的比较：

提供了更简单的API，更少的规范，在与 TypeScript 一起使用时具有可靠的类型推断支持。不能与vueX一起使用。

VueX3--vue2 VueX4--vue3

1.没有mutations 了。

2.直接支持ts。

3.不需要注入、导入、调用函数，自动完成功能。

4.取消modules嵌套结构，提供了平面结构，store之间的交叉组合就直接导入和使用即可。

5.取消命名空间模块，扁平结构下，所有store都可以是命名空间。

看到这里，如果您想要了解VueX转换pinia，请点击这里 pinia官方转换方法链接

1.安装

yarn add pinia
# 或者使用 npm
npm install pinia

如果您的应用使用 Vue 2，您还需要安装组合 API：@vue/composition-api。

在main.js中注册

import { createPinia } from 'pinia'

app.use(createPinia())

如果用的是vue2，还需要多下载一个插件并注册：

import {createPinia, PiniaVuePlugin} from 'pinia'

Vue.use(PiniaVuePlugin)

const pinia = createPinia()

new Vue({

el: '#app',

pinia,

})

这也将添加 devtools 支持。

什么是store

一个 Store （如 Pinia）是一个实体，它持有未绑定到您的组件树的状态和业务逻辑，也就是托管全局状态。

它有点像一个始终存在并且每个人都可以读和写的一个组件。它有3个概念：state=数据、getters=计算、actions=方法。

什么时候用store

1.存取可以在整个项目中使用的数据，如导航栏的用户信息。

2.需要页面保留的数据，如复杂的多步骤表格

知道了上述内容之后，我们开始使用store

2.安装完成并理解基本概念后，开始用store

2.1使用defineStore定义一个store

英语：define：定义; 界定; 明确; 解释(词语)的含义

store：(大型)百货商店; 商店，储存，储备;

Store 是使用pinia内置函数 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递：

import {defineStore} from 'pinia'
//useStore可以是任何名字，这是自定义的一个变量名,可以是useCar、userUser等
//第一个参数storeId是项目中store唯一的id
export const useStore = defineStore('storeId', {
    ...other options
})

2.2 使用store

可以定义任意数量的store。

import {useStore} from '@/stores/counter'

export default {
    setUp(){
        const store = useStore() 
        // 您可以返回整个 store 实例以在模板中使用它
        return { store }
    }

}

如果store中记录了user的name、doublecount等值，从中批量提取属性，会想到什么方式呢？

const {name, doublecount} = store          
// 虽然下意识想到这样写，因为等同于vue的解构，但是不对，要用到指定方法storeToRefs（）
//如下：
setUp() {
    const store = useStore()
    const {name, doublecount} = storeToRefs(store)
    return {
        name,
        doublecount
    }
}