Merge pull request #21 from hisasann/feature/add-vuex-typesafe-helper

Feature/add vuex typesafe helper

Author: hisasann

package.json

@@ -47,6 +47,7 @@
     "url": "https://github.com/hisasann/typescript-nuxtjs-boilerplate/issues"
   },
   "dependencies": {
+    "@lollipop-onl/vuex-typesafe-helper": "^0.2.6",
     "@nuxt/typescript": "^2.8.0",
     "@nuxtjs/axios": "^5.5.3",
     "@nuxtjs/pwa": "^3.0.0-beta.14",

src/@types/vuex.d.ts

@@ -0,0 +1,3 @@
+import { Store as CounterStore } from '@/store/counter'
+
+export type RootStore = CounterStore

src/pages/example/counter.vue

@@ -0,0 +1,97 @@
+<template lang="pug">
+div
+  h1.title
+    | counter
+  div
+    p.clicked
+      | Clicked:
+      span.value {{ value }}
+      span times
+    p
+      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">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { RootStore } from '@/@types/vuex'
+
+@Component
+export default class Counter extends Vue {
+  $store!: RootStore
+
+  /** computed */
+  public get value() {
+    return this.$store.state.counter.count
+  }
+
+  /** Nuxt ライフサイクル */
+  public asyncData({ store }: any) {
+    const { state } = store as RootStore
+    const { count } = state.counter
+
+    // ...
+  }
+
+  /** Nuxt ライフサイクル */
+  public fetch({ store }: any) {
+    const { state, commit, dispatch } = store as RootStore
+    const { count } = state.counter
+
+    // ...
+  }
+
+  public onIncrement() {
+    console.log('onIncrement')
+    const { state, commit } = this.$store
+    commit('counter/increment', 1)
+  }
+
+  public onDecrement() {
+    console.log('onDecrement')
+    const { state, commit } = this.$store
+    commit('counter/decrement', 1)
+  }
+
+  public onIncrementIfOdd() {
+    console.log('onIncrementIfOdd')
+    const { state, getters, commit } = this.$store
+
+    if (getters['counter/isOdd']) {
+      this.onIncrement()
+    }
+  }
+
+  public async onIncrementAsync() {
+    console.log('onIncrementAsync')
+    const { state, dispatch } = this.$store
+    await dispatch('counter/asyncUpdateCount', 1)
+  }
+
+  public head() {
+    return {
+      title: 'counter'
+    }
+  }
+}
+</script>
+
+<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/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 = {
+  increment(state: IState, count: number): void {
+    state.count += count
+  },
+  decrement(state: IState, count: number): void {
+    state.count -= count
+  }
+}
+export type Mutations = Convertor<
+  typeof mutations,
+  {
+    'counter/increment': 'increment'
+    'counter/decrement': 'decrement'
+  }
+>
+
+export type Ctx = DefineActionContext<IState, typeof getters, typeof mutations>
+export const actions = {
+  async asyncUpdateCount(
+    this: Vue,
+    { commit }: Ctx,
+    count: number
+  ): Promise<void> {
+    await commit('increment', count)
+  }
+}
+export type Actions = Convertor<
+  typeof actions,
+  {
+    'counter/asyncUpdateCount': 'asyncUpdateCount'
+  }
+>
+
+// Define store module type
+export type Store = DefineStoreModule<
+  'counter',
+  IState,
+  Getters,
+  Mutations,
+  Actions
+>

yarn.lock

@@ -1213,6 +1213,14 @@
   dependencies:
     core-js "^2.5.7"
 
+"@lollipop-onl/vuex-typesafe-helper@^0.2.6":
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/@lollipop-onl/vuex-typesafe-helper/-/vuex-typesafe-helper-0.2.6.tgz#a1e21e7acf50869bbc98f77406160191657368b4"
+  integrity sha512-4VpiliSKlyPiVXlCMVtQGg5zxFpkBeB7Oj6kmx1b/Vemlr/I4pQAVuW+S1/j0sRTUW0VYnZ2KvPfqI5lK0yZAw==
+  dependencies:
+    typescript "^3.4.5"
+    vuex "^3.1.1"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -13043,6 +13051,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript@^3.4.5:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.2.tgz#a09e1dc69bc9551cadf17dba10ee42cf55e5d56c"
+  integrity sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA==
+
 typescript@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.1.tgz#ba72a6a600b2158139c5dd8850f700e231464202"