1. 安装axios

npm install @nuxtjs/axios --save-dev 

2. nuxt.config.js

export default {
  plugins: [
      {src:'~/plugins/store-cache', ssr:false},
    './plugins/axios.js'
  ],
  modules: [
    'cookie-universal-nuxt',
    "@nuxtjs/axios",
  ],

  build: {
    vendor: ['axios'],
  }
}

3. 在plugins文件夹下新建一个axios.js文件

export default function({ $axios, store }) {

  $axios.defaults.baseURL = ''
  $axios.defaults.timeout = 30000
// 请求拦截器
  $axios.interceptors.request.use(config => {
    if (store.state.token) {
      config.headers['token'] = store.state.token
    }
    return config
  })
  // 相应拦截器
  $axios.interceptors.response.use(response => {
    if (response.code === 20001) {
      return Promise.reject(response.statusText)
    }
    return response.data
  })
}

4. 安装vuex-persistedstate

npm install vuex-persistedstate  --save

5. 在plugins文件夹中创建store-cache.js文件在每次页面刷新前保存sotre中的数据

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  window.onNuxtReady(() => {
    createPersistedState({
      key: "store", // 读取本地存储的数据到store
    })(store)
  })
}

// store/index.js
export const actions = {
  nuxtServerInit(store, { app: { $cookies } }) {
    // ...
    // 初始化相关数据存到 store 中
    const userInfo = $cookies.get('store') || ''
    store.commit('setUserInfo', userInfo)
  }
}

6. 存储登录成功后返回的数据

        this.$store.commit("setUserInfo", res.data)
        this.$cookies.set('token', res.data.token)

7. 请求数据

// 在methods中添加请求数据的方法
 methods: {
    async handleLogin() {
      let res = await this.$axios.post('/login', this.loginForm)
      if (res.code === 20000) {
        this.$message.success("登录成功")
        this.$store.commit("setUserInfo", res.data)
        this.$cookies.set('token', res.data.token)
        this.$router.push({
          path: '/'
        })
      } else {
        this.$message.error("登录失败")
      }
    }
  }

// 使用nuxt提供的asyncData方法
export default {
  name: 'IndexPage',
  data () {
    return {
    }
  },
  methods: {
  },
  async asyncData(context) {
    let res = await context.app.$axios.get("/getIndexContent")
    console.log(res.data.items)
    return res.data.items
  }
}

Q.E.D.