官网文档: https://pinia.vuejs.org/
中文文档: https://pinia.web3doc.top/
参考文章: 学习pinia
推荐文章: Pinia使用方法及持久化存储
- 安装依赖
yarn add pinia
或
npm install pinia
- 在 main.js 中引入注册
import { createApp } from 'vue'
import {createPinia} from "pinia";
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')
- 创建 store 文件
/**
* 注册容器
*/
import { defineStore } from "pinia"
// 定义容器
// 参数1： 容器id, 必须唯一, 可以理解为命名容器
// 参数2： 选项对象
export const useMainStore = defineStore('main', {
// 类似组件的data， 用来存储全局状态
// 注意：
// 1. store 是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value.
state: () => {
return {
count: 0,
userData: null
}
},
// 类似组件的computed， 用来计算状态，也有缓存功能
// 参数1: 默认接收“state”作为第一个参数
// 可以直接使用 this. 来访问整个 store 的实例
// 注意: 由于是 computed 属性，因此无法向它们传递任何参数.
getters: {
doubleCount: (state) => state.count * 2,
// 可以在getters中使用this，需手动标记getter的返回值类型
getCount() : number {
return this.count + 10
},
doubleCountPlusOne() {
// 调用同级方法直接用 this ,自动完成 ✨
return this.doubleCount + 1
}
},
// 类似组件的methods，主要用来封装操作逻辑
// 也可以封装异步接口逻辑
actions: {
// 普通方法
incrementA(a: number) {
this.count += a
},
// 异步方法, 注册用户
async registerUser(login, password) {
this.userData = await api.post({ login, password })
}
}
})
- 页面调用
<template>
<h2>count计算</h2>
<p>{{ mainStore.count }}</p>
<p>
<button @click="handleChangeState">修改state</button>
</p>
</template>
<script setup lang="ts">
import { useMainStore } from '../store'
// 调用得到容器对象
const mainStore = useMainStore()
const handleChangeState = () => {
// 方式一：直接修改state
mainStore.count++
// 重置状态
mainStore.$reset()
// 方式二：批量更新
mainStore.$patch({
count: mainStore.count + 1
})
// 修改部分数据
mainStore.$patch((state) => {
state.count += 1
})
}
</script>
- 持久化问题
推荐插件 pinia-plugin-persistedstate
安装
npm i pinia-plugin-persistedstate
引入
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
使用
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: '你好 pinia',
}
},
persist: true, // 对数据持久化
})
