在 Nuxt 中正确使用 axios 的方法


Nuxt 有官方 axios 模块,该模块自动处理 cookie,将客户端 cookie 传递到服务端。

一、安装

在项目目录使用 npm 命令进行安装:

npm install @nuxtjs/axios --save

或者手动在 package.json 文件中添加依赖,然后执行“npm install”命令进行安装:

{
  "dependencies": {
    "@nuxtjs/axios": "^5.3.4",
    "axios": "^0.18.0",
    "express": "^4.15.3",
    "nuxt-edge": "^2.0.0-25579690.716c04f"
  }
}

二、配置

在 nuxt.config.js 文件里添加 axios 配置:

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ]
}

三、使用

1、组件

1)asyncData 方法中的使用

async asyncData({ app }) {
  const ip = await app.$axios.$get('http://localhost:3000')
  return { ip }
}

2)methods、created、mounted 等中的使用

methods: {
  async fetchSomething() {
    const ip = await this.$axios.$get('http://localhost:3000')
    this.ip = ip
  }
}

2、Store

1)nuxtServerInit 中的使用

async nuxtServerInit ({ commit }, { app }) {
    const ip = await this.$axios.$get('http://localhost:3000')
  commit('SET_IP', ip)
}

2)actions 中的使用

// In store
{
  actions: {
    async getIP ({ commit }) {
           const ip = await this.$axios.$get('http://localhost:3000')
      commit('SET_IP', ip)
    }
  }
}


前一篇:
后一篇:

发表评论