集成pinia及数据持久化

安装

    npm install pinia @pinia/nuxt
    npm i -D @pinia-plugin-persistedstate/nuxt

项目中配置(nuxt.config.ts中)

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],

数据持久化配置,注册插件(plugis/pinia.ts)

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.$pinia.use(piniaPluginPersistedstate)
})

新建文件(store/counter.ts)

// 登录信息持久化保存
import { defineStore } from 'pinia'
export const useLoginStore = defineStore('loginStore', {
    state: () => {
        return {
            userInfo:""
        }
    },
    getters: {

    },
    actions: {
        setUser(e:any){
            this.userInfo = e
        }
    },
    persist: {
        storage: persistedState.localStorage,
      },
})

页面使用

<template>
  <div class="cont">
131434
  </div>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/store/login'


let login = useLoginStore()
console.log(login.userInfo)
login.setUser('dsdfsf')
console.log(login.userInfo)

</script>

<style scoped lang="scss">
.cont{
  height: 100%;
}

</style>