一、axios

倡议间接应用nuxtjs的axios模块。

1.装置并引入@nuxtjs/axios

须要代理请一并装置引入@nuxtjs/proxy

nuxt.config.js中：export default {    modules：[        '@nuxtjs/axios',        '@nuxtjs/proxy'    ],    axios: {        proxy: true,        baseURL: '',        prefix: '/api-prefix',        credential: true    },    proxy: {        '/api-prefix': {            target: 'http://...',            changeOrigin: true,            pathRewrite: {                '^/api-prefix': '',                changeOrigin: true            }        }    },    ...}

2.axios拦挡

在plugins目录下，新增axios-accessor.ts文件：

plugins/axios-accessor.ts中：import { Plugin } from '@nuxt/types'import { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'const accessor: Plugin = ({ error }) => {  $axios.onRequest((config: AxiosRequestConfig) => {    // ...    return config  })    $axios.onError((e: AxiosError<any>) => {    // ...  })    // response拦截器，数据返回后，你能够先在这里进行一个简略的判断  $axios.interceptors.response.use((response: AxiosResponse<any>) => {    const res = response    if (res.status === 200) {      return Promise.resolve(res)    } else {      return Promise.reject(res)    }  },  (e: any) => {    const { status, data } = e.response    error({ statusCode: status, message: data })    return Promise.reject(e)  })}export default accessor

而后利用新增的plugin/axios-accessor.ts

nuxt.config.js中新增如下配置：export default {    ...    plugins: [        '@/plugins/axios-accessor'    ]}

3.非vue文件中应用$axios对象

nuxtjs中的axios模块会在vue实例上挂载一个$axios对象供应用，理论开发过程中，咱们往往习惯将我的项目中api办法放在独自的模块供全局应用，如何在非vue文件中应用$axios对象呢？

nuxtjs往往提供的typescript文档中，在vuex的store初始化示例中，有一并讲到，传送门：https://typescript.nuxtjs.org...

utils/api.ts中：import { NuxtAxiosInstance } from '@nuxtjs/axios'let $axios: NuxtAxiosInstanceexport function initializeAxios (axiosInstance: NuxtAxiosInstance) {  $axios = axiosInstance}export { $axios }
plugin/axios-accessor.ts中：import { Plugin } from '@nuxt/types'import { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'// 新增引入import { initializeAxios } from '~/utils/api'const accessor: Plugin = ({ error, app: { $axios } }) => {  // 此处调用  initializeAxios($axios)    $axios.onRequest((config: AxiosRequestConfig) => {    // ...    return config  })    $axios.onError((e: AxiosError<any>) => {    // ...  })    // response拦截器，数据返回后，你能够先在这里进行一个简略的判断  $axios.interceptors.response.use((response: AxiosResponse<any>) => {    const res = response    if (res.status === 200) {      return Promise.resolve(res)    } else {      return Promise.reject(res)    }  },  (e: any) => {    const { status, data } = e.response    error({ statusCode: status, message: data })    return Promise.reject(e)  })}

功败垂成，后续在其余文件中，只需：
import { $axios } from '@/utils/api'
就能够间接应用啦！

二、store

如nuxtjs官网文档所说，Nuxt.js 反对两种应用 store 的形式，你能够择一应用：

  • 模块形式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）
  • Classic(不倡议应用)： store/index.js返回创立Vuex.Store实例的办法。

联合ts当然是应用 vuex-module-decorators来创立modules。

store/mymodule.ts中：import { Module, VuexModule, Mutation } from 'vuex-module-decorators'@Module({  name: 'mymodule',  stateFactory: true,  namespaced: true,})class MyModule extends VuexModule {  wheels = 2  @Mutation  incrWheels(extra) {    this.wheels += extra  }  get axles() {    return this.wheels / 2  }}
utils/store-accessor.ts中：import { Store } from 'vuex'import { getModule } from 'vuex-module-decorators'import example from '~/store/example'let exampleStore: examplefunction initialiseStores(store: Store<any>): void {  exampleStore = getModule(example, store)}export { initialiseStores, exampleStore }
store/index.ts中：import { Store } from 'vuex'import { initialiseStores } from '~/utils/store-accessor'const initializer = (store: Store<any>) => initialiseStores(store)export const plugins = [initializer]export * from '~/utils/store-accessor'

而后就能够欢快的应用啦！

三、cookie

对于cookie这一块，以前始终用的是js-cookie这个库，这次的nuxtjs我的项目中，mode: 'universal'模式下，服务端渲染时没方法获取到客户端缓存的cookie，导致页面刷新后无奈立刻通过cookie拿到用户缓存的登录状态，因而起初改用cookie-universal-nuxt这个库，api与js-cookie基本一致，可在服务端应用，引入后，会在vue实例上新增一个$cookie对象，为不便全局应用，可仿照$axios的accessor逻辑，如下example：

1.首先装置并引入

npm install cookie-universal-nuxt --save
nuxt.config.js中：export default {    module: [        '@nuxtjs/axios',        '@nuxtjs/proxy',        'cookie-universal-nuxt'    ],    ...}

2.cookie的accossor

utils/api.ts中：import { NuxtAxiosInstance } from '@nuxtjs/axios'import { NuxtCookies } from 'cookie-universal-nuxt'let $axios: NuxtAxiosInstanceexport function initializeAxios (axiosInstance: NuxtAxiosInstance) {  $axios = axiosInstance}let $cookies: NuxtCookiesexport function initializeCookies (cookiesInstance: NuxtCookies) {  $cookies = cookiesInstance}export { $axios, $cookies }
plugin/axios-accessor.ts中：import { Plugin } from '@nuxt/types'import { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'// 新增引入import { initializeAxios, initializeCookies } from '~/utils/api'const accessor: Plugin = ({ error, app: { $axios, $cookies } }) => {  // 此处调用  initializeAxios($axios)  initializeCookies($cookies)    $axios.onRequest((config: AxiosRequestConfig) => {    // ...    return config  })    $axios.onError((e: AxiosError<any>) => {    // ...  })    // response拦截器，数据返回后，你能够先在这里进行一个简略的判断  $axios.interceptors.response.use((response: AxiosResponse<any>) => {    const res = response    if (res.status === 200) {      return Promise.resolve(res)    } else {      return Promise.reject(res)    }  },  (e: any) => {    const { status, data } = e.response    error({ statusCode: status, message: data })    return Promise.reject(e)  })}

在其余文件中，只需：
import { $cookies } from '@/utils/api'
就能够间接应用啦！

OK，先写这么多，有问题欢送指出交换，结尾附上一个demo，如果帮到大家，帮点给个star，感激！https://github.com/elvira0702...。