下载 pnpm i pinia

在 main.ts/js文件里面进行配置

import { createApp } from 'vue'

import App from './App.vue

import router from './router'

// ① 引入createPinia方法从pinia

import { createPinia } from 'pinia'

const app = createApp(App)

const pinia = createPinia()

app.use(pinia)

app.use(router)

app.mount('#app')

下载pnpm i pinia-plugin-persistedstate

在 main.ts/js文件里面进行配置

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

// ① 引入createPinia方法从pinia

import { createPinia } from 'pinia'

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)

const pinia = createPinia()

pinia.use(piniaPluginPersistedstate)

app.use(pinia)

app.use(router)

app.mount('#app')

在App.vue中验证

<script setup lang="ts">

import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

const clickHanlde=()=>{

counter.increment()

}

</script>

<template>

<div>Current Count: {{ counter.count }}</div>

<button @click="clickHanlde">加1</button>

</template>