1. 下载插件
pnpm add pinia @pinia/nuxt
pnpm add pinia-plugin-persistedstate
2.创建文件
/plugis/pinia.ts文件中
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.$pinia.use(piniaPluginPersistedstate)
})
根目录创建/store/counter.ts文件
import { defineStore } from 'pinia'
interface CounterState {
storeTapIndex: number
}
export const useTapIndex = defineStore('counter', {
state: (): CounterState => ({
storeTapIndex: 1
}),
actions: {},
persist: process.client && {
storage: localStorage,
paths: ['storeTapIndex']
}
3.配置nuxt.config.ts中的modules
modules: [
'@pinia/nuxt'
],
4.页面中使用
import { useTapIndex } from '~/store/counter';
const tapIndex = useTapIndex();
console.log(tapIndex)