Add vuex and axios

vuejs-example-apps · Aug 6, 2016 · f3ee4f1 · f3ee4f1
1 parent 1faad76
commit f3ee4f1
Show file tree

Hide file tree

Showing 15 changed files with 155 additions and 23 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015-webpack"]
+  "presets": ["es2015-webpack", "stage-2"]
 }
diff --git a/build/dev-server.js b/build/dev-server.js
@@ -39,7 +39,7 @@ app.use(hotMiddleware)
 app.use(express.static(path.resolve(__dirname, '../dist')))
 
 app.get('*', function(req, res) {
-  const title = "demo"
+  var title = "demo"
   res.send(`<!DOCTYPE html>
               <html>
                 <head>

diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js
@@ -20,7 +20,7 @@ module.exports = {
     }
   },
   resolveLoader: {
-    root: path.join(__dirname, 'node_modules'),
+    fallback: [path.join(__dirname, '../node_modules')]
   },
   module: {
     loaders: [
@@ -33,6 +33,10 @@ module.exports = {
         loader: 'babel',
         exclude: /node_modules/
       },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: 'file',

diff --git a/build/webpack.client.config.js b/build/webpack.client.config.js
@@ -4,14 +4,14 @@ const baseWebpackConfig = require('./webpack.base.config')
 
 webpackConfig = merge(baseWebpackConfig, {})
 
-if (process.env.NODE_ENV === 'production') {
-  webpackConfig.devtool = '#source-map'
-  webpackConfig.plugins.push(
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  )
-}
+// if (process.env.NODE_ENV === 'production') {
+//   webpackConfig.devtool = '#source-map'
+//   webpackConfig.plugins.push(
+//     new webpack.optimize.UglifyJsPlugin({
+//       compress: {
+//         warnings: false
+//       }
+//     })
+//   )
+// }
 module.exports = webpackConfig
diff --git a/build/webpack.server.config.js b/build/webpack.server.config.js
@@ -19,14 +19,8 @@ webpackConfig = merge(baseWebpackConfig, {
           VUE_ENV: '"server"'
         }
       }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
     })
-  ],
-  devtool: '#source-map'
+  ]
 })
 
 module.exports = webpackConfig
diff --git a/package.json b/package.json
@@ -11,22 +11,27 @@
     "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.client.config.js && cross-env NODE_ENV=production webpack --config ./build/webpack.server.config.js"
   },
   "dependencies": {
+    "axios": "^0.13.1",
     "body-parser": "^1.15.2",
     "express": "^4.14.0",
     "lru-cache": "^4.0.1",
     "serialize-javascript": "^1.3.0",
     "serve-favicon": "^2.3.0",
     "vue": "^2.0.0-beta.6",
+    "vue-resource": "^0.9.3",
     "vue-router": "^2.0.0-rc.1",
-    "vue-server-renderer": "^2.0.0-beta.6"
+    "vue-server-renderer": "^2.0.0-beta.6",
+    "vuex": "^2.0.0-rc.3"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
     "babel-preset-es2015-webpack": "^6.0.0",
+    "babel-preset-stage-2": "^6.13.0",
     "cross-env": "^1.0.6",
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.4",
+    "json-loader": "^0.5.4",
     "nodemon": "^1.10.0",
     "vue-loader": "^9.2.2",
     "webpack": "^2.1.0-beta.20",

diff --git a/server.js b/server.js
@@ -24,10 +24,20 @@ app.get('*', (req, res) => {
   const start = Date.now()
   const context = { url: req.url }
   const renderStream = renderer.renderToStream(context)
+  let firstChunk = true
 
   res.write('<!DOCTYPE html><body>')
 
   renderStream.on('data', chunk => {
+    if (firstChunk) {
+      // send down initial store state
+      if (context.initialState) {
+        res.write(`<script>window.__INITIAL_STATE__=${
+          serialize(context.initialState, { isJSON: true })
+        }</script>`)
+      }
+      firstChunk = false
+    }
     res.write(chunk)
   })
 

diff --git a/src/App.vue b/src/App.vue
@@ -1,21 +1,38 @@
 <template>
   <div id="app">
      <img src="./assets/logo.png">
+     <button @click='increment'>Increment +1</button>
+     <button @click='decrement'>Decrement -1</button>
      <ul>
-       <li><router-link to="/">Home</router-link></li>
+       <li><router-link to="/" exact>Home</router-link></li>
+       <li><router-link to="/topics">Topics</router-link></li>
+       <li><router-link to="/display">Display</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
      <router-view class="view"></router-view>
   </div>
 </template>
 
 <script>
+  import { mapActions } from 'vuex'
+  import store from './vuex/store'
   export default {
+    methods: {
+      ...mapActions([
+        'increment',
+        'decrement',
+        'getTopics'
+      ])
+    },
+    store
   }
 </script>
 
 <style>
   body {
     font-family: Helvetica, sans-serif;
   }
+  .router-link-active{
+    color: red ;
+  }
 </style>
diff --git a/src/components/Display.vue b/src/components/Display.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3>Count is {{ count }}</h3>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters({
+      count: 'getCount'
+    })
+  }
+}
+</script>
diff --git a/src/components/Topics.vue b/src/components/Topics.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div v-for="topic in topics">
+      <p>{{topic.title}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters({
+      topics: 'getTopics'
+    })
+  },
+  created () {
+    this.$store.dispatch('getTopics')
+  }
+}
+</script>
diff --git a/src/router.js b/src/router.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Home from './components/Home.vue'
 import About from './components/About.vue'
+import Display from './components/Display.vue'
+import Topics from './components/Topics.vue'
 import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
@@ -10,6 +12,8 @@ const router = new VueRouter({
   base: __dirname,
   routes: [
     { path: '/', component: Home },
+    { path: '/Topics', component: Topics },
+    { path: '/Display', component: Display },
     { path: '/about', component: About }
   ]
 })

diff --git a/src/server-entry.js b/src/server-entry.js
@@ -1,9 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router.js'
+import store from './vuex/store'
 
-const app =new Vue(Vue.util.extend({ router }, App))
+const app = new Vue(Vue.util.extend({ router }, App))
 export default context => {
   router.setInitialLocation(context.url)
+  context.initialState = store.state
   return app
 }
+
diff --git a/src/vuex/actions.js b/src/vuex/actions.js
@@ -0,0 +1,14 @@
+import request from 'axios'
+
+export const getTopics = ({ commit, state }) => {
+  request.get('https://cnodejs.org/api/v1/topics').then((response) => {
+     // console.log(response)
+     commit('TOPICS_LIST', response.data.data)
+  }).catch((error) => {
+    console.log(error)
+  })
+}
+
+
+export const increment = ({ commit }) => commit('INCREMENT')
+export const decrement = ({ commit }) => commit('DECREMENT')
diff --git a/src/vuex/getters.js b/src/vuex/getters.js
@@ -0,0 +1,3 @@
+export const getTopics = state => state.topics
+export const getCount = state => state.count
+
diff --git a/src/vuex/store.js b/src/vuex/store.js
@@ -0,0 +1,39 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import * as actions from './actions'
+import * as getters from './getters'
+
+Vue.use(Vuex)
+
+const defaultState = {
+  topics: [],
+  count: 0
+}
+
+const state = typeof __INITIAL_STATE__ !== 'undefined' ? __INITIAL_STATE__ : defaultState
+
+// const mutations = {
+//   TOPICS_LIST (state, topics) {
+//     state.topics = topics
+//   }
+// }
+const mutations = {
+  TOPICS_LIST (state, topics) {
+    state.topics = topics
+  },
+
+  INCREMENT (state) {
+    state.count++
+  },
+
+  DECREMENT (state) {
+    state.count--
+  }
+}
+
+export default new Vuex.Store({
+  state,
+  mutations,
+  actions,
+  getters: Object.assign({}, getters)
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export const getTopics = state => state.topics
		export const getCount = state => state.count