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.client
    persist: 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.client
    persist: '任意值' // 直接设置字符串可直接变更 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