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) [![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) [📖 **Release Notes**](./CHANGELOG.md)
@ -49,7 +49,7 @@
```js ```js
async asyncData({ app }) { async asyncData({ app }) {
const ip = await app.axios.$get('http://icanhazip.com') const ip = await app.$axios.$get('http://icanhazip.com')
return { ip } return { ip }
} }
``` ```
@ -57,29 +57,20 @@ async asyncData({ app }) {
### Store `nuxtServerInit` ### Store `nuxtServerInit`
```js ```js
async nuxtServerInit ({ commit }, { app }) { 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) commit('SET_IP', ip)
} }
``` ```
### Store actions ### 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 ```js
// In components
export default {
methods: {
updateIP() {
this.$store.dispatch('getIP', { axios: this.$axios })
}
}
}
// In store // In store
{ {
actions: { actions: {
async getIP ({ commit }, { axios }) { async getIP ({ commit }) {
const ip = await axios.$get('http://icanhazip.com') const ip = await this.$axios.$get('http://icanhazip.com')
commit('SET_IP', ip) commit('SET_IP', ip)
} }
} }
@ -159,10 +150,10 @@ requestInterceptor: (config, { store }) => {
Axios plugin also supports fetch style requests with `$` prefixed methods: Axios plugin also supports fetch style requests with `$` prefixed methods:
```js ```js
// Normal usage with axios // Normal usage with axios
let data = (await axios.get('...')).data let data = (await $axios.get('...')).data
// Fetch Style // Fetch Style
let data = await axios.$get('...') let data = await $axios.$get('...')
``` ```
### `setHeader(name, value, scopes='common')` ### `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) Now you can make requests to backend: (Works fine in both SSR and Browser)
```js ```js
async asyncData({app}) { async asyncData({ app }) {
// Magically makes request to http://www.mocky.io/v2/59388bb4120000dc00a672e2 // 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 { return {
nuxt // -> { nuxt: 'Works!' } nuxt // -> { nuxt: 'Works!' }

View File

@ -43,7 +43,7 @@ module.exports = function nuxtAxios (moduleOptions) {
} }
// Register plugin // Register plugin
addPlugin.call(this, { this.addPlugin({
src: path.resolve(__dirname, 'plugin.template.js'), src: path.resolve(__dirname, 'plugin.template.js'),
fileName: 'axios.js', fileName: 'axios.js',
options options
@ -53,14 +53,4 @@ module.exports = function nuxtAxios (moduleOptions) {
console.log(`[AXIOS] Base URL: ${chalk.green(options.baseURL)} , Browser: ${chalk.green(options.browserBaseURL)}`) 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') module.exports.meta = require('../package.json')

View File

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

View File

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

View File

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

View File

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

683
yarn.lock

File diff suppressed because it is too large Load Diff