updated examples with latest vue, solve problem with login example no…

…t starting up. and added vuex into call-log example

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/build.js
 .DS_Store
+.vscode

examples/call-log/README.md

@@ -1,6 +1,8 @@
 # Call log example.
 This example is a [webpack2](https://webpack.github.io/) [vue-loader](https://github.com/vuejs/vue-loader) example. It appends logs after mount every second.
 
+Example has been updated with VueX.
+
 ```
 yarn install
 yarn start

examples/call-log/index.js

@@ -1,5 +1,6 @@
 import Vue from 'blessed-vue'
 import LogComponent from './log.vue'
+import store from './store'
 
 const el = Vue.dom.createElement()
 
@@ -10,5 +11,6 @@ const instance = new Vue({
   components: {
     LogComponent
   },
+  store,
   template: '<LogComponent />'
 }).$mount(el)

examples/call-log/log.vue

@@ -8,11 +8,18 @@
 import moment from 'moment'
 import faker from 'faker'
 import prettySeconds from 'pretty-seconds'
+import { mapActions, mapState } from 'vuex'
+
 export default {
   name: 'log-component',
+  computed: mapState({
+    logs: state => state.logs
+  }),
+  methods: mapActions([
+    'appendLog'
+  ]),
   data: () => {
     return {
-      logs: '',
       logStyle: {
         bg: 'black',
         fg: 'white',
@@ -27,8 +34,9 @@ export default {
     this.$refs.screen.key(['C-c'], () => {
       process.exit(0)
     })
+    console.log(this.$store)
     setInterval(() => {
-      this.logs = `${this.logs}\n\n${faker.name.findName()} called from ${faker.address.state()} ${prettySeconds(faker.random.number(3600))} ago.`
+      this.appendLog(`${faker.name.findName()} called from ${faker.address.state()} ${prettySeconds(faker.random.number(3600))} ago.`)
     }, 1000)
   }
 }

examples/call-log/package.json

@@ -8,15 +8,16 @@
     "start": "npm run build && node bundle.js"
   },
   "devDependencies": {
-    "vue-loader": "^12.0.2",
-    "vue-template-compiler": "^2.3.0",
+    "vue-loader": "^13.7.0",
+    "vue-template-compiler": "^2.5.13",
     "webpack": "^2.3.3",
     "webpack-node-externals": "^1.5.4"
   },
   "dependencies": {
-    "blessed-vue": "^1.2.0",
+    "blessed-vue": "^2.0.0",
     "faker": "^4.1.0",
     "moment": "^2.18.1",
-    "pretty-seconds": "^0.2.1"
+    "pretty-seconds": "^0.2.1",
+    "vuex": "^3.0.1"
   }
 }

examples/call-log/store.js

@@ -0,0 +1,39 @@
+import BlessedVue from 'blessed-vue'
+import Vuex from 'vuex'
+
+BlessedVue.use(Vuex)
+
+// root state object.
+// each Vuex instance is just a single state tree.
+const state = {
+  logs: ''
+}
+
+// mutations are operations that actually mutates the state.
+// each mutation handler gets the entire state tree as the
+// first argument, followed by additional payload arguments.
+// mutations must be synchronous and can be recorded by plugins
+// for debugging purposes.
+const mutations = {
+  appendLog (state, message) {
+    state.logs += `\n\n${message}`
+  }
+}
+
+// actions are functions that cause side effects and can involve
+// asynchronous operations.
+const actions = {
+  appendLog: ({ commit }, message) => commit('appendLog', message)
+}
+
+// getters are functions
+const getters = {}
+
+// A Vuex instance is created by combining the state, mutations, actions,
+// and getters.
+export default new Vuex.Store({
+  state,
+  getters,
+  actions,
+  mutations
+})