[Nuxt] Snippets¶
Vue component template¶
<template></template>
<script lang="ts">
import * as _ from 'lodash';
import {Dictionary} from 'lodash';
import {Component, State, Getter, Mutation, Prop, Vue, Action} from '~/node_modules/nuxt-property-decorator';
@Component({})
export default class extends Vue {
@State st: any;
@State(s => s.hoge.huga) huga: any;
@Action onAction;
@Prop() prop: any;
@Mutation setHogehoge: (x: any) => any;
@Getter getHogeHoge: (x: any) => any;
}
</script>
<style scoped></style>
コンポーネントにイベントを作成¶
コンポーネント内部
this.$emit("on-filter-changed", arg)
コンポーネント呼び出し元
<Component @on-filter-changed="handleChanged"/>
handleChanged(arg) {
// ...
}
decorator¶
Nuxt(Vue)で使えるデコレータの数々をご紹介。
GitHub
kaorun343/vue-property-decorator
Vue.js and Property Decorator. Contribute to kaorun343/vue-property-decorator development by creating an account on GitHub.
GitHub
ktsn/vuex-class
Binding helpers for Vuex and vue-class-component. Contribute to ktsn/vuex-class development by creating an account on GitHub.
上記はnuxt-property-decoratorでまとめて使用できる。
GitHub
nuxt-community/nuxt-property-decorator
Property decorators for Nuxt (base on vue-property-decorator) - nuxt-community/nuxt-property-decorator
@Prop¶
@Prop(Number) readonly propA!: number
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC!: string | boolean
プロパティに初期値を設定してはいけない
デフォルト値はdefaultで設定しましょう。
@Watch¶
@Watch('child')
onChildChanged(val: string, oldVal: string) { }
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) { }
immediateはwatch開始時に開幕フックが呼ばれるdeepをtrueにしないとネストされたObjectの中が変更された場合に通知されない
@Emit¶
@Emit()
yourFunctionName() {}
@Emit('your-function-name')
yourFunctionName2() {}
- 引数を指定しないと関数名をkebab-caseに変換した名称が使われる
@Action¶
store.dispatchの呼び出しと同じ。
@Action baz
@Action('foo') actionFoo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
@Mutation¶
store.commitの呼び出しと同じ。
@Mutation baz
@Mutation('foo') mutationFoo
this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
@Getter¶
store.getterの呼び出しと同じ。
@Getter baz
@Getter('foo') getterFoo
this.getterFoo // -> store.getters.foo
@State¶
@State foo
@State('foo') stateFoo
@State(state => state.bar) stateBar
this.stateFoo // -> store.state.foo
this.stateBar // -> store.state.bar
State直下でない場合は引数が必要。
CSS(style)の切り替え¶
bool値の結果によってclassをつける¶
付けるか付けないかの場合
