vue3添加pinia

村口曹大爷2024-01-28 16:01

概述：Pinia 是一个专为 Vue.js 开发的状态管理库。Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。Pinia 旨在提供一个简单、灵活且性能高效的状态管理方案，使开发者能够更容易地管理应用的状态。

以下是 Pinia 的一些特点和概念：

Vue 3 的 Composition API： Pinia 基于 Vue 3 的 Composition API，这是 Vue.js 3 中引入的一种新的 API 风格，允许开发者更灵活地组织和复用代码。
响应式状态管理： Pinia 使用 Vue 3 的响应式系统来管理状态。这使得状态的变化能够自动触发视图的更新。
零依赖、零代码生成： Pinia 设计为零依赖，没有额外的依赖项，也没有使用代码生成。这使得 Pinia 简洁轻量，同时也提供了灵活性。
插件系统： Pinia 支持插件，这允许开发者通过插件来扩展和定制状态管理库的功能。
Devtools 集成： Pinia 集成了 Vue Devtools，使开发者能够更方便地调试和监控应用程序的状态。
Tree-shakable： Pinia 被设计成 tree-shakable，这意味着你可以只引入你实际使用的部分，而不必担心整个库的体积。
TypeScript 支持： Pinia 提供了对 TypeScript 的良好支持，使得在类型安全的环境中使用状态管理更加方便。

使用 Pinia 可以让开发者更轻松地组织和管理 Vue.js 应用程序中的状态，同时保持简单、高效和可维护的状态管理代码。

第一步：创建一个空的新项目

复制代码

npm create vue@latest

复制代码

npm install
npm  run  dev

第二步：添加pinia

pinia官网：Pinia | Pinia (vuejs.org)

复制代码

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

main.js文件：

复制代码

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

如果是vue2的话

复制代码

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // 其他配置...
  // ...
  // 请注意，同一个`pinia'实例
  // 可以在同一个页面的多个 Vue 应用中使用。 
  pinia,
})

这就完成了