docs(example): simplify example

vuejs · Oct 9, 2018 · b2629cd · b2629cd
1 parent 3d1634b
commit b2629cd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 48 deletions.
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -7,13 +7,15 @@
     <p>computed msg: {{ computedMsg }}</p>
     <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>
+    <p>
+      <button @click="greet">Greet</button>
+    </p>
+
+    <p>
+      Clicked: {{ count }} times
+      <button @click="increment">+</button>
+    </p>
   </div>
 </template>
 
@@ -22,7 +24,7 @@ import Vue from 'vue'
 import Component from '../../lib/index'
 import Hello from './components/Hello.vue'
 import World from './components/World'
-import { mapGetters, mapActions } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 
 // We declare the props separately
 // to make props types inferable.
@@ -37,14 +39,13 @@ const AppProps = Vue.extend({
     Hello,
     World
   },
-  // mapGetters & mapActions example
-  computed: mapGetters([
-    'evenOrOdd'
+
+  // Vuex's component binding helper can use here
+  computed: mapState([
+    'count'
   ]),
-  methods: mapActions([
-    'increment',
-    'decrement',
-    'incrementAsync'
+  methods: mapMutations([
+    'increment'
   ])
 })
 export default class App extends AppProps {
@@ -54,6 +55,16 @@ export default class App extends AppProps {
   // use prop values for initial data
   helloMsg: string = 'Hello, ' + this.propMessage
 
+  // annotate refs type
+  $refs!: {
+    helloComponent: Hello
+  }
+
+  // additional declaration is needed
+  // when you declare some properties in `Component` decorator
+  count!: number
+  increment!: () => void
+
   // lifecycle hook
   mounted () {
     this.greet()
@@ -74,10 +85,5 @@ export default class App extends AppProps {
   incrementIfOdd() {
     this.$store.dispatch('incrementIfOdd')
   }
-
-  // dynamic component
-  $refs!: {
-    helloComponent: Hello
-  }
 }
 </script>
diff --git a/example/src/main.ts b/example/src/main.ts
@@ -2,7 +2,6 @@ import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
 
-// mount
 new Vue({
   el: '#app',
   store,

diff --git a/example/src/store.ts b/example/src/store.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue'
-import Vuex, { ActionContext } from "vuex"
+import Vuex from "vuex"
+
 interface CounterState{
   count: number
 }
@@ -13,37 +14,10 @@ const state = {
 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
 })