fetch server side msg

ckpiggy · ckpiggy · commit 6cb30bdb2dff · 2017-06-25T14:55:07.000+08:00
diff --git a/nuxt-middleware/controllers/api/default.js b/nuxt-middleware/controllers/api/default.js
@@ -0,0 +1,7 @@
+exports.install = function () {
+  F.route('/api/hello_msg', hello_json)
+}
+
+function hello_json () {
+  this.json({msg: 'Hello from API'})
+}
diff --git a/nuxt-middleware/nuxt.config.js b/nuxt-middleware/nuxt.config.js
@@ -1,3 +1,6 @@
 module.exports = {
+  build:{
+    vendor: ['axios']
+  },
   srcDir: 'nuxt/'
 }
diff --git a/nuxt-middleware/nuxt/pages/index.vue b/nuxt-middleware/nuxt/pages/index.vue
@@ -1,7 +1,11 @@
 <template>
     <div>
         <h3>Hello from Total.js and Nuxt.js</h3>
-        <div class="react-container">
+        <div class="container">
+            <p>Value from server</p>
+            <p>{{serverMsg}}</p>
+        </div>
+        <div class="container">
             <p>These values are React</p>
             <input :value="msg" @input="(e)=>{setMsg(e.target.value)}"/>
             <p>{{msg}}</p>
@@ -12,17 +16,25 @@
 </template>
 <script>
     import {mapState, mapMutations} from 'vuex'
+    import axios from 'axios'
     export default {
       computed: {
-        ...mapState(['msg', 'counter'])
+        ...mapState(['msg', 'counter', 'serverMsg'])
       },
       methods: {
         ...mapMutations(['setMsg', 'increase', 'decrease'])
+      },
+      fetch: function ({store, req}) {
+        return axios.get(req.uri.protocol + '//' + req.uri.host+ '/api/hello_msg').then(function (res) {
+          store.commit('setServerMsg', res.data.msg)
+        }).catch(function (e) {
+          console.log(e)
+        })
       }
     }
 </script>
 <style scoped>
-    .react-container {
+    .container {
         padding: 0 20px 20px 20px;
         margin: 10px;
         border-color: darkgray;
diff --git a/nuxt-middleware/nuxt/store/index.js b/nuxt-middleware/nuxt/store/index.js
@@ -4,7 +4,8 @@ const store = function () {
   return new Vuex.Store({
     state: {
       msg: '',
-      counter: 0
+      counter: 0,
+      serverMsg: ''
     },
     mutations: {
       setMsg: function (state, msg){
@@ -15,6 +16,9 @@ const store = function () {
       },
       decrease: function (state) {
         state.counter -= 1
+      },
+      setServerMsg: function (state, msg) {
+        state.serverMsg = msg
       }
     }
   })
diff --git a/nuxt-middleware/package.json b/nuxt-middleware/package.json
@@ -14,6 +14,7 @@
   "author": "ckpiggy",
   "license": "MIT",
   "dependencies": {
+    "axios": "^0.16.2",
     "nuxt": "^1.0.0-alpha.4",
     "total.js": "^2.6.3-3"
   }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,6 @@`
`1`	`1`	`module.exports = {`
	`2`	`+ build:{`
	`3`	`+ vendor: ['axios']`
	`4`	`+ },`
`2`	`5`	`srcDir: 'nuxt/'`
`3`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`"author": "ckpiggy",`
`15`	`15`	`"license": "MIT",`
`16`	`16`	`"dependencies": {`
	`17`	`+ "axios": "^0.16.2",`
`17`	`18`	`"nuxt": "^1.0.0-alpha.4",`
`18`	`19`	`"total.js": "^2.6.3-3"`
`19`	`20`	`}`