added axios, datarest, vuex

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/)

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",

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",

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)
+      })
+  }
+}

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}'
+  }
+})

src/components/Home/Posts.vue

@@ -0,0 +1,46 @@
+<template>
+  <section v-if="opened != null">
+    <h2>{{ opened.title }}</h2>
+    <p>{{ opened.body }}</p>
+    <span
+      @click="closePost()"
+      >
+      close</span>
+  </section>
+  <ul v-else>
+    <li
+      v-for="post in posts"
+      :key="post.id"
+      >
+      <h2>
+        <a
+          @click="openPost(post)"
+          >
+          {{ post.title }}</a></h2>
+    </li>
+  </ul>
+</template>
+
+<script>
+
+// import store from './store'
+// import datarest from 'components/data/datarest'
+
+import { mapState, mapActions } from 'vuex'
+// import { mapState } from 'vuex'
+
+export default {
+  computed: mapState({
+    opened: state => state.posts.opened,
+    posts: state => state.posts.all
+  }),
+  methods: mapActions('posts', [
+    'openPost',
+    'closePost'
+  ]),
+  created () {
+    this.$store.dispatch('posts/getAllPosts')
+  }
+}
+
+</script>

src/components/Home/PresentationMessage.vue

@@ -1,5 +0,0 @@
-<template>
-  <section>
-    <p>Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae domus et clarae.</p>
-  </section>
-</template>

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')

src/pages/Home.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="full-width">
-    <PresentationMessage />
+    <Posts />
   </div>
 </template>
 
 <script>
-import PresentationMessage from 'components/Home/PresentationMessage'
+import Posts from 'components/Home/Posts'
 
 export default {
   components: {
-    PresentationMessage
+    Posts
   }
 }
 </script>

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()] : []
+})

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
+}