pinia开启持久化缓存

1、npm i pinia-plugin-persistedstate

2、tsconfig.json配置：

{
	"compilerOptions": {
		"types": ["pinia-plugin-persistedstate"]
	}
}

3、创建store

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const store = createPinia()

store.use(piniaPluginPersistedstate)

export default store

4、配置pinia-plugin-persistedstate

import { ref } from 'vue'
import { defineStore } form 'pinia'

export const useNumberState = defineStore(
	'number',
	() => {
		const num = ref(1)
		const changeNum = (val: number) => {
			num.value = val
		}
		return { num, changeNum  }
	},
	{
		persist: {
      		storage: localStorage,
    	},
	}
)

5、挂载

import { createApp } from 'vue'
import store from '@/store'
import App from './App.vue'

const app = createApp(App)
app.use(store).mount('#app')