安装插件

npm install pinia --save

npm install pinia-plugin-persist --save // 状态持久化

app.ts

import piniaPluginPersist from 'pinia-plugin-persist'
const app = createApp(App)
const store = createPinia()
app.use(store)
app.use(router)
store.use(piniaPluginPersist) // 状态持久化
app.mount('#app')

stores ts 编写

import { defineStore } from 'pinia'
const UserStore = defineStore('userStore', {
    state: () => ({
        name: 'asdfasdf'
    }),
    actions: {
        updateName(name: string) {
            this.name = name
        }
    },
   persist: {
        enabled: true, // 开启持久化
        strategies: [
            {
                storage: localStorage,
            }
        ]
    }
})
export default UserStore

页面调用

<script lang="ts" setup>
import UserStore from '@/stores/user';
const userStore = UserStore();
console.info(userStore.name)
setTimeout(() => {
    userStore.updateName("asdfasd")
}, 1000);
</script>