Nuxt3-pinia环境下实现数据持久化

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