feat: upgrade for nuxt rc8

BREAKING CHANGE: app.axios is not available anymore (without $) should always use app.$axios
master
Pooya Parsa 2017-08-30 21:39:30 +04:30
parent a75097dcef
commit a341185f5b
7 changed files with 619 additions and 142 deletions

View File

@ -8,7 +8,7 @@
[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
> 🔒 Secure and easy [axios](https://github.com/mzabriskie/axios) integration with Nuxt.js.
> Secure and Easy [Axios](https://github.com/mzabriskie/axios) integration with Nuxt.js.
[📖 **Release Notes**](./CHANGELOG.md)
@ -49,7 +49,7 @@
```js
async asyncData({ app }) {
const ip = await app.axios.$get('http://icanhazip.com')
const ip = await app.$axios.$get('http://icanhazip.com')
return { ip }
}
```
@ -57,29 +57,20 @@ async asyncData({ app }) {
### Store `nuxtServerInit`
```js
async nuxtServerInit ({ commit }, { app }) {
const ip = await app.axios.$get('http://icanhazip.com')
const ip = await app.$axios.$get('http://icanhazip.com')
commit('SET_IP', ip)
}
```
### Store actions
If you need axios instance in store actions, you may have to pass it when dispatching.
(Needs Nuxt >= 1.0.0-RC8)
```js
// In components
export default {
methods: {
updateIP() {
this.$store.dispatch('getIP', { axios: this.$axios })
}
}
}
// In store
{
actions: {
async getIP ({ commit }, { axios }) {
const ip = await axios.$get('http://icanhazip.com')
async getIP ({ commit }) {
const ip = await this.$axios.$get('http://icanhazip.com')
commit('SET_IP', ip)
}
}
@ -159,10 +150,10 @@ requestInterceptor: (config, { store }) => {
Axios plugin also supports fetch style requests with `$` prefixed methods:
```js
// Normal usage with axios
let data = (await axios.get('...')).data
let data = (await $axios.get('...')).data
// Fetch Style
let data = await axios.$get('...')
let data = await $axios.$get('...')
```
### `setHeader(name, value, scopes='common')`
@ -245,9 +236,9 @@ Start Nuxt
Now you can make requests to backend: (Works fine in both SSR and Browser)
```js
async asyncData({app}) {
async asyncData({ app }) {
// Magically makes request to http://www.mocky.io/v2/59388bb4120000dc00a672e2
const nuxt = await app.axios.$get('59388bb4120000dc00a672e2')
const nuxt = await app.$axios.$get('59388bb4120000dc00a672e2')
return {
nuxt // -> { nuxt: 'Works!' }

View File

@ -43,7 +43,7 @@ module.exports = function nuxtAxios (moduleOptions) {
}
// Register plugin
addPlugin.call(this, {
this.addPlugin({
src: path.resolve(__dirname, 'plugin.template.js'),
fileName: 'axios.js',
options
@ -53,14 +53,4 @@ module.exports = function nuxtAxios (moduleOptions) {
console.log(`[AXIOS] Base URL: ${chalk.green(options.baseURL)} , Browser: ${chalk.green(options.browserBaseURL)}`)
}
// Temporary fix for nuxt/nuxt.js#1127
function addPlugin (template) {
const { dst } = this.addTemplate(template)
// Add to nuxt plugins
this.options.plugins.unshift({
src: path.join(this.options.buildDir, dst),
ssr: template.ssr
})
}
module.exports.meta = require('../package.json')

View File

@ -1,25 +1,6 @@
import Axios from 'axios'
import Vue from 'vue'
const axiosPlugin = {
install() {
if(Vue.__nuxt_axios_installed__) {
return
}
Vue.__nuxt_axios_installed__ = true
if (!Vue.prototype.hasOwnProperty('$axios')) {
Object.defineProperty(Vue.prototype, '$axios', {
get () {
return this.$root.$options.$axios
}
})
}
}
}
Vue.use(axiosPlugin)
// We cannot extend Axios.prototype
const axiosExtraProto = {}
@ -111,7 +92,7 @@ const baseURL = process.browser
? (process.env.API_URL_BROWSER || '<%= options.browserBaseURL %>')
: (process.env.API_URL || '<%= options.baseURL %>')
export default (ctx) => {
export default (ctx, inject) => {
const { app, store, req } = ctx
// Create a fresh objects for all default header scopes
@ -182,12 +163,8 @@ export default (ctx) => {
// Error handler
axios.interceptors.response.use(undefined, errorHandler.bind(ctx));
// Make accessible using context
app.axios = app.$axios = axios
ctx.axios = ctx.$axios = axios
if (store) {
store.axios = store.$axios = axios
}
// Publish axios to the context
inject('axios', axios)
// Setup axios helpers
setupHelpers(axios)

View File

@ -30,12 +30,12 @@
"dependencies": {
"axios": "^0.16.2",
"chalk": "^2.1.0",
"nuxt": "^1.0.0-rc4",
"nuxt": "^1.0.0-rc8",
"whatwg-url": "^6.1.0"
},
"devDependencies": {
"codecov": "^2.3.0",
"eslint": "^4.4.1",
"eslint": "^4.5.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "^20.0.3",

View File

@ -7,7 +7,7 @@
<script>
export default {
async asyncData ({ app }) {
let res = await app.axios.$get('foo/bar')
let res = await app.$axios.$get('foo/bar')
return {
res
}

View File

@ -10,7 +10,7 @@ export default {
async fetch ({ app, route }) {
let doLogin = route.query.login !== undefined
if (doLogin) {
app.axios.setHeader('sessionId', reqCtr++)
app.$axios.setHeader('sessionId', reqCtr++)
}
},
computed: {

683
yarn.lock

File diff suppressed because it is too large Load Diff