Pinia使用

Pinia 🍍

Pinia | The intuitive store for Vue.js (vuejs.org)

🍍 适用于 Pinia 的持久化存储插件

为什么使用这个插件？ | Pinia Plugin Persistedstate (prazdevs.github.io)

1.安装

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文件引入pina组件

//引入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);

 })

Store三个核心概念

前言java中属性为什么要用getter setter方法？

1.第一个核心概念State

用于全局存储数据

const beimaoStore = defineStore('beimao-store', {
    state: () => {
        return {
            name: '游客',
            token: "",
            refreshToken: "",
            traceId: ""
        }
    },

})

2.第二个核心概念Getters

获取traceId：

https://www.npmjs.com/package/uuid

使用：

在 Pinia 中，getters 实际上是响应式的计算属性，而不是传统意义上的方法。这意味着当你定义一个 getter 时，它更像是一个响应式的数据属性，而不是一个需要被调用的方法。因此，在访问 getter 时，你不需要使用括号，例如 store.getTraceId 而不是 store.getTraceId()

3.第三个核心概念Action（不需要掌握）

state: () => {
        return {

                 traceId: ""
               }
             },

actions: {
        
	        setName(traceId:string) {
	           this.traceId = traceId
	        },    

		  }

使用

beimao_store.setTraceId("5678");