Pinia 是什么?
Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3
本文只讲 Pinia 在 Vue3 中的使用, 在 Vue2 中使用略有差异,参考 官方文档
Pinia 优势
符合直觉,易于学习
极轻, 仅有 1 KB
模块化设计,便于拆分状态
安装 Pinia
安装需要 @next 因为 Pinia 2 处于 beta 阶段, Pinia 2 是对应 Vue3 的版本
# 使用 npm
npm install pinia@next
创建一个 pinia(根存储)并将其传递给应用程序:
import {
createApp } from 'vue'
import App from './App.vue'
import {
createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
核心概念与基本使用
Store
Store 是一个保存状态和业务逻辑的实体,可以自由读取和写入,并通过导入后在 setup 中使用
创建一个 store
// store.js
import {
defineStore } from "pinia";
import {
otherState } from '@/store/otherState.js'
export