Nuxt3中引入pinia+数据持久化储存（pinia-plugin-persistedstate）

1.安装

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

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

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

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

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

4.新建文件(store/counter.ts)

import { defineStore } from 'pinia'


interface CounterState {
    times: number
    name: string
  }

export const userCouter = defineStore('counter',{
    state: (): CounterState => ({
        times: 5,
        name: "追光的栗子"
    }),
    
    actions: {
        increment(){
            this.times ++ 
            this.name = "栗子" 
        }
    },
    
    //persist定义要做判断，因为localStorage是客户端参数，所以需要加process.client
    persist: process.client && {
        storage: localStorage,
        paths: ['times']
    }   
    
})

5.页面使用

//引入
import { userCouter } from '~/store/counter'

const counter = userCouter()

const change = ()=>{
  counter.increment()
  console.log(counter.times)
  console.log(counter.name)
}

<template>
<div>{{ counter.name }}</div>
<div>{{ counter.times }}</div>

<button @click="change">改变pinia中的数据</button>
</template>