当前位置：首页 > news >正文

Pinia入门

news 来源：原创 2025/5/10 23:14:30

一、铺垫

pinia官网：https://pinia.vuejs.org/zh/getting-started.html

以下的内容全部来自官网；只不过有时候访问官网上不去；只能自己扒下来；

pinia的前端使用非常简单；只需要掌握几个步骤就可以

二、套路

1.用你喜欢的包管理器安装 pinia：

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

2.创建一个 pinia 实例 (根 store) 并将其传递给应用：

import { createApp } from 'vue'
import { createPinia } from 'pinia' //引入创建pinia的函数
import App from './App.vue'

const pinia = createPinia() //创建pinia实例
const app = createApp(App)

app.use(pinia) //可以在app组件中使用pinia的方法和仓库
app.mount('#app')

3.定义仓库

程序员在其他文件中创建仓库；为什么要创建仓库呢？

答：为了统一的存放数据和方法；使得程序员开发时；降低使用难度；一次性的找到想要的数据；

pinia实例中包含仓库，仓库中是数据和方法；

import { defineStore } from 'pinia' //导入定义仓库的方法；

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
// 其他配置...
})