✨✨个人主页:沫洺的主页
📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏
📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏
📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏
💖💖如果文章对你有所帮助请留下三连✨✨
🧊pinia
🎈Pinia官网:Home | Pinia (vuejs.org)
🎈 官方说的
🎈为什么要使用 Pinia?
🎈Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,则会将您的应用程序暴露给安全漏洞。 但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:
🎫开发工具支持
- 📌跟踪动作、突变的时间表
- 📌商店出现在使用它们的组件中
- 📌时间旅行和更容易的调试
🎫热模块更换
- 📌在不重新加载页面的情况下修改您的商店
- 📌在开发时保持任何现有状态
🎫插件:使用插件扩展 Pinia 功能
🎫为 JS 用户提供适当的 TypeScript 支持或自动完成功能
🎫服务器端渲染支持
💎安装
npm install pinia
npm install pinia-plugin-persist
💎新建文件 src/store/index.ts
import { createPinia } from 'pinia' import piniaPluginPersist from 'pinia-plugin-persist' const store = createPinia() store.use(piniaPluginPersist) export default store
💎导入并使用store
import { createApp } from 'vue' import App from './App.vue' //引入路由文件 import router from './router/index' //导入store import store from './store/index' //使用路由组件 const app=createApp(App) app.use(router) //使用store app.use(store) app.mount('#app')
💎新建 /store/appStore.ts 文件
import { defineStore } from 'pinia' export const appStore = defineStore({ id: 'myapp', state:()=>{ return { name:"", pass:"", } }, getters:{ }, actions:{ }, // 开启数据缓存 persist: { enabled: true, strategies: [ { key: 'my_app', storage: localStorage, } ] } })
💎登录页面模拟本地存储
<template> 主页 <input v-model="name" placeholder="请输入用户名" /> <input v-model="pass" placeholder="请输入用户密码" /> </template> <script setup lang="ts"> import { appStore } from "@/store/appStore"; import { storeToRefs } from "pinia"; let { name, pass } = storeToRefs(appStore()); </script>
💦 效果
🎫 可以看到数据信息保存到客户端浏览器中,将浏览器关闭后,数据还存在,有点cookie的感觉