[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)で使えるデコレータの数々をご紹介。

上記は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開始時に開幕フックが呼ばれる
  • deeptrueにしないとネストされた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をつける

付けるか付けないかの場合