Pinia
约 1511 字大约 5 分钟
2025-08-30
Vue 存储库
持久化存储插件
适用于 Pinia 的持久化存储插件
步骤
- 步骤一: 软件包管理器安装依赖项
pnpm add pinia-plugin-persistedstate- 步骤二: 将插件添加到你的 pinia 实例中
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)- 步骤三: main.ts中使用
import { createApp } from 'vue'
import App from './App.vue'
// element plus
import ElementPlus from "element-plus";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// element icons
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// element css
import "element-plus/dist/index.css";
import "./app.css"
// element dark(内置暗黑模式)
import "element-plus/theme-chalk/dark/css-vars.css";
import router from "@/routers/index";
import pinia from "@/stores/index";
const app = createApp(App)
// 注册element Icons组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router).use(pinia).use(ElementPlus, { locale: zhCn}).mount("#app");-步骤四: 使用
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: true,
})persist的配置项
persist: true,
persist: {
key: 'my-custom-key',
storage: localStorage,
// storage: sessionStorage,
},核心概念
state
相当于 data 初始化数据
官方推荐使用箭头函数，对ts类型推断友好
getters
相当于 计算属性(computed)
actions
相当于 方法(methods)
同步程序 和 异步程序 都在里面定义
创建Pinia步骤
概念 : Vue 的存储库，它允许您跨组件/页面共享状态
步骤一 : 安装 pinia
// pinia 生产依赖 npm install pinia -S步骤二 : 去全局挂载实例
// main.js ===> 创建实例 挂载组件/注册组件 import { createPinia } from 'pinia'; const store = createPinia(); app.use(store);步骤三 : 创建 仓库文件
// 可以将步骤二的代码 模块化出去, 即 stores文件下 创建 pinia.js // 步骤一 : 在src文件下 创建 stores文件 // 步骤二 : 在stores文件下 创建 相关的js文件 eg:user.js(用户相关的) // 步骤三 : 仓库文件的命名规范 : 以use开头 以Store结束 eg: useHomeStore.js步骤四 : 定义仓库
// 使用 defineStore(参数一 , 参数二) 去定义仓库 // define翻译 : 定义 // defineStore(参数一 , 参数二) // 参数一 : 必须是唯一的，类似于ID 第一个参数不可以缺失，要独一无二 // 参数二 : 配置store项
定义仓库步骤
步骤4-1 : 定义仓库
useHomeStore.js 文件
// 步骤一 : 导出pinia的 defineStore import {defineStore} from 'pinia' // 步骤二 : 定义仓库 并且 导出模块 export const useHomeStore = defineStore('home', { // 相当于 data 初始化数据 // 官方推荐使用箭头函数，对ts类型推断友好 state: () => ({ count: 1, msg: '左林你好', }), // 相当于 计算属性(computed) getters: { getCount: (state) => { return state.count * 5; }, }, // 相当于 方法(methods) // 同步程序 和 异步程序 都在里面定义 actions: { changeCount() { this.count++; }, }, });组件中使用 App.vue 文件
// 1.选项式的API // 步骤一 : 导入仓库 import { useHomeStore } from '@/stores/useHomeStore'; // 步骤二 : 激活仓库 const home = useHomeStore(); // 完整的代码 <template> <div> <h1>{{ home.count }}</h1> <h1>{{ home.msg }}</h1> <h1>{{ home.getCount }}</h1> <button @click="home.changeCount">改变</button> </div> </template> // 和组合式的API相比: // 没有steup标签 // 在外面 导入仓库 // 需要在里面定义 setup函数 来激活仓库 // 必须要有放回值 而且是一个对象 // 也就是 return {激活的名称} <script> import { useHomeStore } from '@/stores/useHomeStore'; export default { setup() { const home = useHomeStore(); // 一旦 home 被实例化，我们可以直接访问在 home 的 `state`、`getters` 和 `actions` 中定义的任何属性。 return { home, }; }, }; </script> // 2.组合式的API // 步骤一 : 导入仓库 import { useHomeStore } from '@/stores/useHomeStore'; // 步骤二 : 激活仓库 const home = useHomeStore(); // 全部代码 <template> <div> <h1>{{ home.count }}</h1> <h1>{{ home.msg }}</h1> <h1>{{ home.getCount }}</h1> <button @click="home.changeCount">改变</button> </div> </template> // 和选项式的API相比: // 多个 setup标签 // 里面直接定义 // 直接激仓库 <script setup> import { useHomeStore } from '@/stores/useHomeStore'; // 激活仓库 const home = useHomeStore(); </script>
storeToRefs()
解构state 里面的数据 保持响应式 可以使用storeToRefs()
代码演示
// 步骤一 : 导出pinia里面的 storeToRefs 函数方法
import { storeToRefs } from 'pinia'
// 步骤二 : 结构出state里面的数据
const { count } = storeToRefs(login)
// 步骤三 : 定义方法
function changeC() {
count.value++;
}
// 完整的代码 useLoginStore文件
// 步骤一 : 定义仓库 需要导入定义仓库的函数
import { defineStore } from 'pinia';
// 步骤三 : 导入ref reactive computed
import { ref, computed, reactive } from 'vue';
// 步骤二 : 定义仓库并且需要向外面暴露
export const uesLoginStore = defineStore('login', () => {
// 定义基本数据类型
const count = ref(88);
const data = reactive({
num: 99,
msg: '你好!左林',
});
// 定义计算属性
// double翻译为 : 双倍的
const doubleCount = computed(() => {
return count.value * 2;
});
// 定义函数
function changeCount() {
console.log('我执行了哟');
count.value++;
}
// 定义的数据 必须有返回值!!!
return { count, data, doubleCount, changeCount };
});
// 完整的代码 App.vue文件
<template>
<div>
<h1>{{ count }}</h1>
<h1>{{ doubleCount }}</h1>
<h2>{{ data.num }}</h2>
<h2>{{ data.msg }}</h2>
<button @click="changeC">改变</button>
</div>
</template>
<script setup>
// 步骤一 : 导入创库
import { uesLoginStore } from '@/stores/uesLoginStore';
// 步骤三 : 导出storeToRefs()方法
import { storeToRefs } from 'pinia';
// 步骤二 : 激活仓库
const login = uesLoginStore();
// 结构出 里面的数据
const { count, doubleCount, data } = storeToRefs(login);
// 步骤四 : 改变count的数据 动态的数据
function changeC() {
count.value++;
console.log(count.value);
}
</script>
<style lang="scss" scoped></style>$patch()
使用 $patch()方法 实现多条数据的同时更改
代码演示
// 基本的用法
login.$patch({
count: store.count + 1,
age: 120,
name: 'DIO',
})
// 代码
// 步骤一 : 导入创库
import { uesLoginStore } from '@/stores/uesLoginStore';
// 步骤二 : 激活仓库
const login = uesLoginStore();
login.$patch({
count: login.count + 9999,
message: '左林',
});
// 总结 变更state数据
<script setup>
import { uesLoginStore } from '@/stores/uesLoginStore';
const login = uesLoginStore();
// 方式1: 直接修改, vuex不允许这种方式(需要提交mutation),但pinia是允许的
login.message = 'xxx'
// 方式2: 多条数据的同时修改
login.$patch({message: 'xxx' , num : 999})
// 方式3: 箭头函数形式
login.$patch((state) => { state.message = 'xxx' })
// 方式4:使用state修改数据
login.$state = { message:'xxx' }
// 方式5: 使用actions
user.setUserId('xxx')
</script>$reset()
重置state
代码演示
<script setup>
import { useLoginStore } from '@/stores/uesLoginStore';
const login = useLoginStore()
login.$reset()
</script>