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)
}
}