Pinia--Vue存储库,在Vue3+ts中全局定义以及简单使用

最新推荐文章于 2025-05-01 21:31:07 发布

原创最新推荐文章于 2025-05-01 21:31:07 发布

· 504 阅读

1 ·

版权

文章标签：

#vue.js #前端 #typescript

前端开发同时被 2 个专栏收录

93 篇文章

订阅专栏

typescript

9 篇文章

订阅专栏

本文介绍了如何安装和使用Pinia进行状态管理。首先通过yarn或npm安装Pinia，然后在main.js中引入并配置。接着在test.ts文件中使用defineStore定义store，包含state和actions。在组件中，通过useCounterStore获取store并在setup函数中使用counter的count属性和方法。

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

Pinia 中文文档

安装:

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

在项目的 main.js 文件中引入:

import { createPinia,Pinia } from "pinia";

const pinia = createPinia();

app.use(pinia);

然后你在项目中定义一个文件夹: counter==>test.ts

import { defineStore } from "pinia";

export const useCounterStore = defineStore('counter', { // counter为这个存储库的名字
    state: () => {
      return { count: 0 }
    },
    // 也可以定义为
    // state: () => ({ count: 0 })
    actions: {
      increment() {
        this.count++
      },
    },
  })

在组件中使用:

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

export default {
  setup() {
    const counter = useCounterStore(); //这里的counter就是我们在test.ts中的存储库的counter名字

    console.log(counter.count) // 打印: 0

    counter.count++
    // 带自动补全 ✨
    counter.$patch({ count: counter.count + 1 })
    // 或使用 action 代替
    counter.increment()
  },
}