vue3使用pinia进行持久化存储完整步骤

pinia

1.安装pinia

pnpm install pinia

2.安装持久化存储pinia-plugin-persistedstate

pnpm install pinia-plugin-persistedstate

3.创建文件夹stores

4.引入persist 持久化存储

index.ts

import { createPinia } from "pinia";
import persist from 'pinia-plugin-persistedstate'\
const pinia = createPinia()
pinia.use(persist)
export default pinia
//统一导出
export * from './modules/test'

5.挂载pinia到main.ts

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
createApp(App).use(pinia).mount('#app')

6.定义Store

modules/test.ts

import {defineStore} from 'pinia'
import { ref } from 'vue'
export const useTestStore = defineStore('test',()=>{
    //模拟token信息
    const token = ref('')
    //设置token信息
    const setToken = (val:string)=>{
        token.value = val
    }
    //清除token信息
    const cleanToken = ()=>{
        token.value = ''
    }
    //暴怒方法和变量
    return {
        token,
        setToken,
        cleanToken
    }
})

7.使用store

<template>
<div class="token">{{ TestStore.token }}</div>
<button type="button" @click="TestStore.setToken('tokenjs')">设置token</button>
<button type="button" @click="TestStore.cleanToken">清除token</button>
</template>
<script setup lang="ts">
//引入方法
import {useTestStore} from '@/stores/modules/test'
const TestStore = useTestStore()

</script>
<style scoped>

</style>

/test’
const TestStore = useTestStore()

```