😤 feat: add counter of store and vue

Author: hisasann

src/pages/example/counter.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+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
+      button(@click="onIncrement") +
+      button(@click="onDecrement") -
+      button(@click="onIncrementIfOdd") Increment if odd
+      button(@click="onIncrementAsync") Increment async
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { RootStore } from '@/@types/vuex'
+
+@Component
+export default class Counter extends Vue {
+  $store!: RootStore
+
+  counter: number = 0
+
+  /** computed */
+  public get isOdd() {
+    return this.$store.getters['counter/isOdd']
+  }
+
+  /** Nuxt ライフサイクル */
+  public async asyncData({ store }: any) {
+    await console.log('counter/asyncData')
+    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')
+    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)
+  }
+
+  /** Vue ライフサイクル */
+  public mounted() {
+    console.log('mounted:', this.$refs)
+
+    setTimeout(async () => {
+      await this.asyncCount(200)
+    }, 5000)
+  }
+
+  public increment() {
+    const { state, commit } = this.$store
+    commit('counter/updateCount', state.counter.count + 1)
+
+    // updated counter count
+    console.log('counter/increment', state.counter.count)
+    return state.counter.count
+  }
+
+  public async asyncCount(count: number) {
+    const { state, dispatch } = this.$store
+
+    await dispatch('counter/asyncUpdateCount', state.counter.count + count)
+
+    // updated counter count
+    console.log('counter/asyncCount', state.counter.count)
+  }
+
+  public onIncrement(e) {}
+
+  public onDecrement(e) {}
+
+  public onIncrementIfOdd(e) {}
+
+  public onIncrementAsync(e) {}
+
+  public head() {
+    return {
+      title: 'counter'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/example/index.vue

@@ -65,6 +65,8 @@ section
     nuxt-link(to='/example/video', no-prefetch) video
   p
     nuxt-link(to='/example/server-side-set-cookie', no-prefetch) server-side-set-cookie
+  p
+    nuxt-link(to='/example/counter', no-prefetch) counter
 </template>
 
 <script lang="ts">

src/store/counter.ts

@@ -0,0 +1,70 @@
+import Vue from 'vue'
+import {
+  Convertor,
+  DefineActionContext,
+  DefineStoreModule
+} from '@lollipop-onl/vuex-typesafe-helper'
+
+// Only define interface of state
+export interface IState {
+  count: number
+}
+export const state = (): IState => ({
+  count: 0
+})
+
+// Convert to global name
+// It is an error if there is excess or deficiency
+export const getters = {
+  isOdd: (state: IState): number => {
+    return state.count % 2
+  }
+}
+export type Getters = Convertor<
+  typeof getters,
+  {
+    'counter/isOdd': 'isOdd'
+  }
+>
+
+export const mutations = {
+  updateCount(state: IState, count: number): void {
+    state.count = count
+  },
+  resetCount(state: IState): void {
+    state.count = 0
+  }
+}
+export type Mutations = Convertor<
+  typeof mutations,
+  {
+    'counter/updateCount': 'updateCount'
+    'counter/resetCount': 'resetCount'
+  }
+>
+
+export type Ctx = DefineActionContext<IState, typeof getters, typeof mutations>
+export const actions = {
+  async asyncUpdateCount(
+    this: Vue,
+    { commit }: Ctx,
+    count: number
+  ): Promise<void> {
+    await commit('updateCount', count)
+  }
+}
+export type Actions = Convertor<
+  typeof actions,
+  {
+    'counter/asyncUpdateCount': 'asyncUpdateCount'
+  }
+>
+
+// Define store module type
+export type Store = DefineStoreModule<
+  'counter',
+  IState,
+  Getters,
+  Mutations,
+  Actions
+>