Nuxt.js(Class API) + TypeScriptの書き方

ライブラリ

• nuxt-property-decorator
• vuex-class

書き方

pages/index.vue

<template>
  <div>
    <p>message : {{message}}</p>
    <p>message2 : {{message2}}</p>
    <p>messageToBeChanged : {{messageToBeChanged}}</p>
    <p>childMessage : {{childMessage}}</p>
    <p>storeText : {{storeText}}</p>
    <Test text-message="これはprops" @byChild="clickedChildButton" />
    <button @click="changeMessage">メッセージを変更する</button>
    <button @click="changeStoreText">storeTextを変更</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'nuxt-property-decorator'
import { Getter, Action } from 'vuex-class'
import Test from '~/components/Test.vue'

@Component({
  components: {
    Test
  }
})
export default class IndexPage extends Vue {
  // getter
  @Getter('storeText') storeText!: string
  // mutation
  @Action('commitStoreText') commitStoreText: any
  // @Mutation('setStoreText') setStoreText: any
  // data
  message = 'test'
  messageToBeChanged = '変更前'
  childMessage = '特になし'
  // watch
  @Watch('message')
  onChangeMessage() {
    this.messageToBeChanged = 'messageの値が変化したから変更した'
  }
  // computed
  get message2() {
    return `${this.message}2`
  }
  // method
  changeMessage() {
    this.message = 'メソッドからの変更'
  }
  clickedChildButton(text: string) {
    this.childMessage = text
  }
  changeStoreText() {
    this.commitStoreText('storeTextが変更された')
  }
  //lifecycle
  created() {
    console.log('created')
  }
  mounted() {
    console.log('mounted')
  }
}
</script>

components/Test.vue

<template>
  <div>
    <p>test component</p>
    <p>props text : {{textMessage}}</p>
    <button @click="onClickByChild">emitボタン</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'

@Component({})
export default class SpTag extends Vue {
  @Prop({ default: 'これはデフォルト', required: true })
  textMessage!: string

  onClickByChild() {
    this.$emit('byChild', 'emit発火！')
  }
}
</script>

store/index.ts

import { MutationTree, GetterTree, ActionTree } from 'vuex'

export type RootState = ReturnType<typeof state>

export const state = () => ({
  storeText: 'store初期値',
})

export const getters: GetterTree<RootState, RootState> = {
  storeText: state => state.storeText,
}

export const mutations: MutationTree<RootState> = {
  setStoreText(state, text: string): void {
    state.storeText = text
  }
}

export const actions: ActionTree<RootState, RootState> = {
  commitStoreText({ commit }: {commit: any}, storeText: any) {
    commit('setStoreText', storeText)
  }
}