Nuxt3-pinia环境下实现数据持久化
1、安装
yarn add pinia @pinia/nuxt
然后进行配置,修改nuxt.config.ts
export default defineNuxtConfig({devtools: { enabled: false },typescript: {shim: false},modules: ['@pinia/nuxt', // +'@pinia-plugin-persistedstate/nuxt', // + ],pinia: {autoImports: ['defineStore' // import { defineStore } from 'pinia' // + 自动引入defineStore ]} })
2、新建目录composables
,新建文件store.ts
export const useMockStore = defineStore('nuxtStore', () => {const mock = ref(0)const setMock = (num: number) => {mock.value = num}return {mock,setMock} })// useMockStore、setMock、mock 名称自定义
3、页面内使用
<template><div>21211 {{ foo}}store: {{ store.mock }}<button @click="store.setMock(99999)">按钮</button></div> </template> <!-- <script lang="ts"> export default {layout: 'default' } </script> --> <script lang="ts" setup>/* layout */// definePageMeta({ layout: 'default' })/* interface *//* props *//* emit *//* store */const store = useMockStore()/* data */const route = useRoute()const foo = useFoo()console.log(route, foo, 'route')/* fn */ </script>
4、使用pinia插件实现持久化 sessionStorage、localStorage
安装持久化插件:
yarn add @pinia-plugin-persistedstate/nuxt
1)、第一种,nuxt.config.ts 中配置持久化
//nuxt.config.ts // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({devtools: { enabled: false },typescript: {shim: false},modules: ['@pinia/nuxt','@pinia-plugin-persistedstate/nuxt',],pinia: {autoImports: ['defineStore' // import { defineStore } from 'pinia' ]},piniaPersistedstate: {storage: 'sessionStorage' // + 持久化 } })
新建 composables -> plugin.ts 文件
export const usePluginStateStore = defineStore('pluginStore', () => {const pState = ref(0)const setPState = () => {pState.value += 1}return {pState,setPState} }, {persist: true // + 添加此处持久化 }) // , { // persist: persistedState.sessionStorage // }
页面内使用
<template><div>21211 {{ foo}}<div>store: {{ store.mock }}<button @click="store.setMock(99999)">按钮</button></div><div>pStore: {{pStore.pState}}<button @click="pStore.setPState">按钮</button></div></div> </template> <!-- <script lang="ts"> export default {layout: 'default' } </script> --> <script lang="ts" setup>/* layout */// definePageMeta({ layout: 'default' })/* interface *//* props *//* emit *//* store */const store = useMockStore()const pStore = usePluginStateStore() // 持久化使用/* data */const route = useRoute()const foo = useFoo()console.log(route, foo, 'route')/* fn */ </script>
2)、第二种,store 内设置
nuxt.config.ts 内配置
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({devtools: { enabled: false },typescript: {shim: false},modules: ['@pinia/nuxt','@pinia-plugin-persistedstate/nuxt',],pinia: {autoImports: ['defineStore' // import { defineStore } from 'pinia' ]},// piniaPersistedstate: {// storage: 'sessionStorage' // 持久化// } })
新建 composables -> plugin.ts 文件
export const usePluginStateStore = defineStore('pluginStore', () => {const pState = ref(0)const setPState = () => {pState.value += 1}return {pState,setPState} }, {// 注意:persist定义要做判断,因为localStorage/sessionStorage是客户端参数,所以需要加process.clientpersist: process.client && {storage: sessionStorage} })
3)、第三种 更改 cookie
配置 nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({devtools: { enabled: false },typescript: {shim: false},modules: ['@pinia/nuxt','@pinia-plugin-persistedstate/nuxt',],pinia: {autoImports: ['defineStore' // import { defineStore } from 'pinia' ]},// piniaPersistedstate: {// storage: 'sessionStorage' // 持久化// } })
新建 composables -> plugin.ts 文件
export const usePluginStateStore = defineStore('pluginStore', () => {const pState = ref(0)const setPState = () => {pState.value += 1}return {pState,setPState} }, {// 注意:persist定义要做判断,因为localStorage/sessionStorage是客户端参数,所以需要加process.clientpersist: '任意值' // 直接设置字符串可直接变更 cookie的值 })
页面内使用
<template><div>21211 {{ foo}}<div>store: {{ store.mock }}<button @click="store.setMock(99999)">按钮</button></div><div>pStore: {{pStore.pState}}<button @click="pStore.setPState">按钮</button></div></div> </template> <!-- <script lang="ts"> export default {layout: 'default' } </script> --> <script lang="ts" setup>/* layout */// definePageMeta({ layout: 'default' })/* interface *//* props *//* emit *//* store */const store = useMockStore()const pStore = usePluginStateStore() // 持久化使用/* data */const route = useRoute()const foo = useFoo()console.log(route, foo, 'route')/* fn */ </script>
http://mmall.preview.selleroa.com/couponProList?type=1&coupon_id=1706004850344ua5xx8vu