Add vuex example (#250)

Author: vip30

example/App.vue

@@ -8,6 +8,12 @@
     <Hello ref="helloComponent" />
     <World />
     <button @click="greet">Greet</button>
+
+    Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.
+    <button @click="increment">+</button>
+    <button @click="decrement">-</button>
+    <button @click="incrementIfOdd">Increment if odd</button>
+    <button @click="incrementAsync">Increment async</button>
   </div>
 </template>
 
@@ -16,6 +22,7 @@ import Vue from 'vue'
 import Component from '../lib/index'
 import Hello from './Hello.vue'
 import World from './World'
+import { mapGetters, mapActions } from 'vuex'
 
 // We declare the props separately
 // to make props types inferable.
@@ -29,7 +36,16 @@ const AppProps = Vue.extend({
   components: {
     Hello,
     World
-  }
+  },
+  // mapGetters & mapActions example
+  computed: mapGetters([
+    'evenOrOdd'
+  ]),
+  methods: mapActions([
+    'increment',
+    'decrement',
+    'incrementAsync'
+  ])
 })
 export default class App extends AppProps {
   // inital data
@@ -54,6 +70,11 @@ export default class App extends AppProps {
     this.$refs.helloComponent.sayHello()
   }
 
+  // direct dispatch example
+  incrementIfOdd() {
+    this.$store.dispatch('incrementIfOdd')
+  }
+
   // dynamic component
   $refs!: {
     helloComponent: Hello

example/example.ts

@@ -1,9 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import store from './store'
 
 // mount
 new Vue({
   el: '#app',
+  store,
   render: h => h(App, {
     props: { propMessage: 'World' }
   })

example/store.ts

@@ -0,0 +1,49 @@
+import Vue from 'vue'
+import Vuex, { ActionContext } from "vuex"
+interface CounterState{
+  count: number
+}
+
+Vue.use(Vuex)
+
+const state = {
+  count: 0
+}
+
+const mutations = {
+  increment (state: CounterState) {
+    state.count++
+  },
+  decrement (state: CounterState) {
+    state.count--
+  }
+}
+
+const actions = {
+  increment: (context: ActionContext<CounterState, any>) => context.commit('increment'),
+  decrement: (context: ActionContext<CounterState, any>) => context.commit('decrement'),
+  incrementIfOdd (context: ActionContext<CounterState, any>) {
+    if ((context.state.count + 1) % 2 === 0) {
+      context.commit('increment')
+    }
+  },
+  incrementAsync (context: ActionContext<CounterState, any>) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        context.commit('increment')
+        resolve()
+      }, 1000)
+    })
+  }
+}
+
+const getters = {
+  evenOrOdd: (state: CounterState) => state.count % 2 === 0 ? 'even' : 'odd'
+}
+
+export default new Vuex.Store({
+  state,
+  getters,
+  actions,
+  mutations
+})