Pinia - 悦读

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);

 })