小道具の優雅な更新
プロップの更新はビジネスにおいて一般的な要件ですが、子コンポーネントで直接プロップを修正することは許されません。このやり方は一方向のデータフローの原則に従わないため、開発モードで警告が表示されます。したがって、ほとんどの人は$emitを通してカスタムイベントをトリガし、propを更新するために親コンポーネントでイベントによって渡された値を受け取ります。
child.vue
export defalut {
props: {
title: String
},
methods: {
changeTitle(){
this.$emit('change-title', 'hello')
}
}
}
parent.vue
<child :title="title" @change-title="changeTitle"></child>
export default {
data(){
return {
title: 'title'
}
},
methods: {
changeTitle(title){
this.title = title
}
}
}
この方法に問題はありませんし、私もよくこの方法でプロップを更新します。その場合、syncモディファイアはこれを非常に簡単にします。
parent.vue
<child :title.sync="title"></child>
export defalut {
props: {
title: String
},
methods: {
changeTitle(){
this.$emit('update:title', 'hello')
}
}
}
バインディングプロパティに.syncを追加するだけで、子コンポーネントの中からpropを更新するupdate:property nameがトリガーされます。
provide/inject
export default {
provide() {
return {
app: this
}
}
}
child.vue
export default {
inject: ['app'],
created() {
console.log(this.app) // App.vue
}
}
バージョン2.5.0+では、デフォルト値を設定することでオプションにすることができます。
export default {
inject: {
app: {
default: () => ({})
}
},
created() {
console.log(this.app)
}
}
インジェクト・プロパティの名前を変更したい場合、そのソースを示すために from を使用することができます：
export default {
inject: {
myApp: {
// from変異の値はprovideプロパティの名前と同じである。
from: 'app',
default: () => ({})
}
},
created() {
console.log(this.myApp)
}
}
provideとinjectは、主に高レベルのプラグイン/コンポーネント・ライブラリを開発する際に使用されることに注意することが重要です。通常のアプリケーションコードでは推奨されません。しかし、役に立つ場合もあります。
小さなステート・マネージャー
大規模なプロジェクトのデータ状態は複雑で、通常はvuexを使って管理されます。しかし、小規模なプロジェクトや単純な状態のプロジェクトでは、いくつかの状態を管理するためだけにライブラリを導入するのは少し扱いにくいです。バージョン2.6.0以降では、新しいVue.observableが、オブジェクトをレスポンシブデータにすることで、この厄介な問題を解決するのに役立ちます：
// store.js
import Vue from 'vue'
export const state = Vue.observable({
count: 0
})
ご利用ください：
<div @click="setCount">{{ count }}</div>
import {state} from '../store.js'
export default {
computed: {
count() {
return state.count
}
},
methods: {
もちろん、ステートを変更するメソッドを再利用するように変異をカスタマイズすることもできます：
import Vue from 'vue'
export const state = Vue.observable({
count: 0
})
export const mutations = {
SET_COUNT(payload) {
if (payload > 0) {
state.count = payload
}
}
}
ご利用ください：
import {state, mutations} from '../store.js'
export default {
computed: {
count() {
return state.count
}
},
methods: {
setCount() {
mutations.SET_COUNT(100)
}
}
}
