ページのタイトルを画面に表示する場合、layoutで共通化する事が多いと思います。
Vue2(Nuxt2)では、EventBusを使っていましたが、Vue3では削除されました。
外部ライブラリ（mittやtiny-emitter）を使えばできるようですが、あえて戻すような事をする必要はないかな。
EventBusでは「$emitで、$onに渡して、値をセットする」という流れで実装していましたが、
Vue3では、useStateを定義したら、そのまま参照・変更できるので便利！
ここで疑問。useStateでセットした値が、他のタブで取得できないか？
他のタブでは取得できないのでOK！
修正
page（Options API）
data () {
return {
+ pageTitle: useState('pageTitle', () => null)
}
},
created () {
- this.$emit('updateTitle', 'ページタイトル')
+ this.pageTitle = 'ページタイトル'
}
layout（Options API）
data () {
return {
- pageTitle: null
+ pageTitle: useState('pageTitle', () => null)
}
},
created () {
- this.$nuxt.$on('updateTitle', this.setTitle)
},
methods: {
- setTitle (title) {
- this.pageTitle = title
- }
}
リファクタ
短いとは言え、冗長になるので、Composableで共通化すると良さそうですね。
下記と同じような実装になるので、参考に書いてみました。
composables/authRedirect.ts – Repos
composables/pageTitle.ts
// ページタイトルをlayoutに渡す
export const usePageTitle = () => {
const pageTitle = useState<string | null>('pageTitle', () => null)
const update = (title: string | null) => { pageTitle.value = title }
return {
title: readonly(pageTitle),
update
}
}
page
const { update } = usePageTitle()
update('ページタイトル')
layout
const { title: pageTitle } = usePageTitle()
