🦑 feat: change increment code to redux/counter

https://github.com/reduxjs/redux/tree/master/examples/counter

Author: hisasann

src/pages/example/counter.vue

@@ -2,15 +2,16 @@
 div
   h1.title
     | counter
-  p counter: {{ counter }} {{ this.$store.state.counter.count }}
-  p isOdd: {{ isOdd }} {{ this.$store.getters['counter/isOdd'] }}
   div
-    p Clicked: {{ value }} times
+    p.clicked
+      | Clicked:
+      span.value {{ value }}
+      span times
     p
-      button(@click="onIncrement") +
-      button(@click="onDecrement") -
-      button(@click="onIncrementIfOdd") Increment if odd
-      button(@click="onIncrementAsync") Increment async
+      button.button-size(@click="onIncrement") +
+      button.button-size(@click="onDecrement") -
+      button.button-size(@click="onIncrementIfOdd") Increment if odd
+      button.button-size(@click="onIncrementAsync") Increment async
 </template>
 
 <script lang="ts">
@@ -21,75 +22,54 @@ import { RootStore } from '@/@types/vuex'
 export default class Counter extends Vue {
   $store!: RootStore
 
-  counter: number = 0
-
   /** computed */
-  public get isOdd() {
-    return this.$store.getters['counter/isOdd']
+  public get value() {
+    return this.$store.state.counter.count
   }
 
   /** Nuxt ライフサイクル */
-  public async asyncData({ store }: any) {
-    await console.log('counter/asyncData')
+  public asyncData({ store }: any) {
     const { state } = store as RootStore
     const { count } = state.counter
 
-    return {
-      counter: count + 1
-    }
+    // ...
   }
 
   /** Nuxt ライフサイクル */
-  public async fetch({ store }: any): Promise<void> {
-    await console.log('counter/fetch')
+  public fetch({ store }: any) {
     const { state, commit, dispatch } = store as RootStore
     const { count } = state.counter
 
-    await dispatch('counter/asyncUpdateCount', count + 19)
+    // ...
   }
 
-  /** Vue ライフサイクル */
-  public created() {
-    setTimeout(() => {
-      this.counter = this.increment()
-    }, 3000)
+  public onIncrement() {
+    console.log('onIncrement')
+    const { state, commit } = this.$store
+    commit('counter/increment', 1)
   }
 
-  /** Vue ライフサイクル */
-  public mounted() {
-    console.log('mounted:', this.$refs)
-
-    setTimeout(async () => {
-      await this.asyncCount(200)
-    }, 5000)
+  public onDecrement() {
+    console.log('onDecrement')
+    const { state, commit } = this.$store
+    commit('counter/decrement', 1)
   }
 
-  public increment() {
-    const { state, commit } = this.$store
-    commit('counter/updateCount', state.counter.count + 1)
+  public onIncrementIfOdd() {
+    console.log('onIncrementIfOdd')
+    const { state, getters, commit } = this.$store
 
-    // updated counter count
-    console.log('counter/increment', state.counter.count)
-    return state.counter.count
+    if (getters['counter/isOdd']) {
+      this.onIncrement()
+    }
   }
 
-  public async asyncCount(count: number) {
+  public async onIncrementAsync() {
+    console.log('onIncrementAsync')
     const { state, dispatch } = this.$store
-
-    await dispatch('counter/asyncUpdateCount', state.counter.count + count)
-
-    // updated counter count
-    console.log('counter/asyncCount', state.counter.count)
+    await dispatch('counter/asyncUpdateCount', 1)
   }
 
-  public onIncrement(e) {}
-
-  public onDecrement(e) {}
-
-  public onIncrementIfOdd(e) {}
-
-  public onIncrementAsync(e) {}
-
   public head() {
     return {
       title: 'counter'
@@ -98,4 +78,20 @@ export default class Counter extends Vue {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.clicked {
+  font-size: 1.5em;
+}
+
+.value {
+  color: red;
+  margin: 0 5px 0 5px;
+}
+
+.button-size {
+  font-size: 1.2em;
+  width: 170px;
+  height: 100px;
+  margin: 2px 2px;
+}
+</style>

src/store/counter.ts

@@ -28,18 +28,18 @@ export type Getters = Convertor<
 >
 
 export const mutations = {
-  updateCount(state: IState, count: number): void {
-    state.count = count
+  increment(state: IState, count: number): void {
+    state.count += count
   },
-  resetCount(state: IState): void {
-    state.count = 0
+  decrement(state: IState, count: number): void {
+    state.count -= count
   }
 }
 export type Mutations = Convertor<
   typeof mutations,
   {
-    'counter/updateCount': 'updateCount'
-    'counter/resetCount': 'resetCount'
+    'counter/increment': 'increment'
+    'counter/decrement': 'decrement'
   }
 >
 
@@ -50,7 +50,7 @@ export const actions = {
     { commit }: Ctx,
     count: number
   ): Promise<void> {
-    await commit('updateCount', count)
+    await commit('increment', count)
   }
 }
 export type Actions = Convertor<