Nuxt reference cookie-universal-nuxt requests cookie method on the server

Nuxt reference cookie-universal-nuxt requests cookies on the server

Official Documentation

npm install cookie-universal-nuxt -s

existAdd to

modules: [    'cookie-universal-nuxt'  ],

Set cookies

this.$('token', 123456)

Get cookies

this.$("token")

Clear cookies

this.$('token')

existasyncDataGet

async asyncData({ app }) {
    (app.$("token"));
},

nuxt cookie-universal-nuxt with vuex-persistedstate for data persistence

Because the server does not have Local Storage and Session Storage

So I used the cookie-universal-nuxt plugin

When working on Nuxt project, I found that the data stored by Vuex was lost after refreshing the page.

Use vuex-persistedstate to persist data

cookie-universal-nuxt installation

Installation of cookie-universal-nuxt

npm install cookie-universal-nuxt -s

Open File

Add under modules

modules: [
? ? // /axios
? ? 'cookie-universal-nuxt'
? ],

For more usage methods, please clickPortal

vuex-persistedstate installation

Installation command

npm install vuex-persistedstate --save

Use with cookie-universal-nuxt

Create a new file in the plugins folder

import createPersistedState from 'vuex-persistedstate'
export default ({ app, store }) => {
  createPersistedState({
    storage: {
      getItem: (key) => app.$(key),
      setItem: (key, value) =>
        app.$(key, value, {
          path: '/',
          maxAge: 60 * 60 * 24 * 1 // Cookie storage time can be modified        }),
      removeItem: (key) => app.$(key)
    }
  })(store)
}

Open File

Import under the piugins module

plugins: [
    '@/plugins/persistedState',
  ],

Here you can use cookies to persist

How to use

this.$('token', 'XXXXXXXXXXXXXXXXXXXX')

Just use cookie-universal-nuxt normally

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.