Pinia 简介
Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库
为什么要使用Pinia？
Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式API的话，可能会认为可以通过一行简单的 export const state = reactive（{}）来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：
- 测试工具类
- 插件：可通过插件扩展[inia功能
- 为JS开发者提供适当的TypeScript支持以及自动补全功能
- 支持服务端渲染
- Devtools支持
- 追踪 actions、mutations 的时间线
- 在组件中展示它们所用到的Store
- 让调试更容易的Time travel - 热更新
- 不必重载页面即可修改Store
- 开发时可保持当前的Store - 插件：可通过插件扩展Pinia的功能
1.Pinia安装
npm install pinia
npm install pinia-plugin-persistedstate
Pinia是一个基于Vue 3的状态管理库，它使得管理Vue的全局状态变得更加容易和直观。
而pinia-plugin-persistedstate是 Pinia 的官方插件之一，它提供了一种将 Pinia 状态持久化到本地存储的方式，以确保状态数据在刷新或关闭页面后仍然存在。
换句话说，Pinia是用于管理Vue 3应用程序的状态管理库，而pinia-plugin-persistedstate是为Pinia提供的一个插件，它允许您将Vue应用程序中的状态保存到本地存储中，以便在下一次访问应用程序时恢复状态。
2.新建store/Pinia.ts
//引入pina
import { createPinia,defineStore } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia
const wmsStore = defineStore('wmsStore', {
state: () => {
return {
name: '游客',
isMenuCollapse:false
}
},
persist: {
key: 'wms-store',
storage: localStorage,
},
})
export {wmsStore}
3.在main.ts文件中引入pinia组件
//引入pina
import pinia from '@/store/pinia'
const app = createApp(App)
app.use(pinia)
4. 使用变量
import { wmsStore } from '@/store/pinia'
const wmsstore = wmsStore()
onMounted(()=>{
console.log(wmsstore.name);
wmsstore.name = "张三"
console.log(wmsstore.name);
})
-