From 8dd21b9e2de1ba8ce2e78a64df16a5fdaab27d11 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Tue, 2 Apr 2019 12:59:58 +0200 Subject: [PATCH] added axios, datarest, vuex --- README.md | 14 +++--- package-lock.json | 22 +++++++--- package.json | 4 +- src/api/datarest.js | 22 ++++++++++ src/api/http-axios.js | 8 ++++ src/components/Home/Posts.vue | 46 ++++++++++++++++++++ src/components/Home/PresentationMessage.vue | 5 --- src/index.js | 6 ++- src/pages/Home.vue | 6 +-- src/store/index.js | 17 ++++++++ src/store/modules/posts.js | 48 +++++++++++++++++++++ 11 files changed, 177 insertions(+), 21 deletions(-) create mode 100644 src/api/datarest.js create mode 100644 src/api/http-axios.js create mode 100644 src/components/Home/Posts.vue delete mode 100644 src/components/Home/PresentationMessage.vue create mode 100644 src/store/index.js create mode 100644 src/store/modules/posts.js diff --git a/README.md b/README.md index 600f7a1..40cd988 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,24 @@ # Les Guides de Paris -# How to use -## clone this repos -## install +## How to use +#### clone this repos +#### install ``` npm install ``` -## run dev +#### run dev ``` npm run dev ``` open http://localhost:8080 in your browser -## run prod +#### run prod ``` npm run prod ``` then deploy the dist folder +## Ref + Based on VueJs template using Webpack 4 from the 'Vue.js and Webpack 4 From Scratch' article series on [itnext.io](https://itnext.io) from Daniel Cook. + +[Vue.js REST API Consumption with Axios](https://alligator.io/vuejs/rest-api-axios/) diff --git a/package-lock.json b/package-lock.json index 8d3c299..fd0e111 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1902,6 +1902,15 @@ "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", "dev": true }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "^1.3.0", + "is-buffer": "^1.1.5" + } + }, "babel-code-frame": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", @@ -4826,7 +4835,6 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz", "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==", - "dev": true, "requires": { "debug": "^3.2.6" }, @@ -4835,7 +4843,6 @@ "version": "3.2.6", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", - "dev": true, "requires": { "ms": "^2.1.1" } @@ -6219,8 +6226,7 @@ "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=", - "dev": true + "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=" }, "is-callable": { "version": "1.1.4", @@ -7655,8 +7661,7 @@ "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", - "integrity": "sha1-MKWGTrPrsKZvLr5tcnrwagnYbgo=", - "dev": true + "integrity": "sha1-MKWGTrPrsKZvLr5tcnrwagnYbgo=" }, "multicast-dns": { "version": "6.2.3", @@ -10886,6 +10891,11 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuex": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz", + "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg==" + }, "w3c-hr-time": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz", diff --git a/package.json b/package.json index 1837f8e..5804cec 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,10 @@ "author": "Daniel Cook", "license": "MIT", "dependencies": { + "axios": "^0.18.0", "vue": "^2.6.10", - "vue-router": "^3.0.2" + "vue-router": "^3.0.2", + "vuex": "^3.1.0" }, "devDependencies": { "@babel/core": "^7.4.0", diff --git a/src/api/datarest.js b/src/api/datarest.js new file mode 100644 index 0000000..356ea62 --- /dev/null +++ b/src/api/datarest.js @@ -0,0 +1,22 @@ +import { HTTP } from './http-axios' +// import { store } from 'modules/data/store' + +export default { + getPosts (cb) { + HTTP.get('posts') + .then(response => { + console.log('response', response) + cb(response.data) + }) + }, + getPost (id, cb) { + HTTP.get(`posts/` + id) + .then(response => { + console.log('response', response) + cb(response.data) + }) + .catch(e => { + this.errors.push(e) + }) + } +} diff --git a/src/api/http-axios.js b/src/api/http-axios.js new file mode 100644 index 0000000..a0f34d4 --- /dev/null +++ b/src/api/http-axios.js @@ -0,0 +1,8 @@ +import axios from 'axios' + +export const HTTP = axios.create({ + baseURL: `http://jsonplaceholder.typicode.com/`, + headers: { + Authorization: 'Bearer {token}' + } +}) diff --git a/src/components/Home/Posts.vue b/src/components/Home/Posts.vue new file mode 100644 index 0000000..3f0e52f --- /dev/null +++ b/src/components/Home/Posts.vue @@ -0,0 +1,46 @@ + + + diff --git a/src/components/Home/PresentationMessage.vue b/src/components/Home/PresentationMessage.vue deleted file mode 100644 index 6629ad9..0000000 --- a/src/components/Home/PresentationMessage.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/index.js b/src/index.js index 932e557..48aa830 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,14 @@ import Vue from 'vue' +import Vuex from 'vuex' import router from './router' +import store from './store' import App from './App' - import 'assets/css/app.styl' +Vue.use(Vuex) + new Vue({ router, + store, render: h => h(App) }).$mount('#app') diff --git a/src/pages/Home.vue b/src/pages/Home.vue index 3c82ce4..99c1cad 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -1,15 +1,15 @@ diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..929f65c --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,17 @@ +import Vue from 'vue' +import Vuex from 'vuex' +import posts from './modules/posts' + +Vue.use(Vuex) + +// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart + +// const debug = process.env.NODE_ENV !== 'production' + +export default new Vuex.Store({ + modules: { + posts + } + // strict: debug, + // plugins: debug ? [createLogger()] : [] +}) diff --git a/src/store/modules/posts.js b/src/store/modules/posts.js new file mode 100644 index 0000000..9936704 --- /dev/null +++ b/src/store/modules/posts.js @@ -0,0 +1,48 @@ +import datarest from '../../api/datarest' + +// initial state +const state = { + all: [], + opened: null +} + +// getters +const getters = {} + +// actions +const actions = { + getAllPosts ({ commit }) { + datarest.getPosts(posts => { + commit('setPosts', posts) + }) + }, + openPost ({ commit }, post) { + datarest.getPost(post.id, post => { + commit('setOpened', post) + }) + }, + closePost ({ commit }) { + commit('clearOpened') + } +} + +// mutations +const mutations = { + setPosts (state, posts) { + state.all = posts + }, + setOpened (state, post) { + state.opened = post + }, + clearOpened (state) { + state.opened = null + } +} + +export default { + namespaced: true, + state, + getters, + actions, + mutations +}