[vue3] pinia的入门使用

 ✨✨个人主页:沫洺的主页

📚📚系列专栏: 📖 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的感觉