简单记录一下学习pinia的过程
-
Pinia是什么?
Pinia 是一个基于 Vue 3 的状态管理库。 与 Vue 2 中的 Vuex 不同,Pinia 使用了 Vue 3 中的 Composition API,因此可以更好地支持 TypeScript 和更灵活的状态管理方式。
-
Pinia有什么特点?
- 简单并且易于使用,它的 API 设计是针对 Composition API 的,因此可以方便地使用 Vue 3 的新特性。
- 支持 TypeScript,并且提供了强类型的定义,可以在编译时捕获错误。
- 支持插件机制,可以轻松地扩展它的功能。
- 支持多个 store 实例,每个 store 实例都可以拥有自己的状态和行为。
- 支持持久化存储,可以将 store 中的数据保存在本地存储中,以便在页面刷新后仍然可以访问。
使用方法
- 安装 pinia
yarn add pinia
#或者使用
npm npm install pinia
2.在 main.ts/js文件里面进行配置
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(router)
app.mount('#app')
在main.ts/js文件内引入Pinia的createPinia()函数
import { createPin