components/Heading1.vue
はレイアウトに組み込まれています。
pages/page.vue
からcomposable/useOperation.vue
を経由してcomponents/Heading1.vue
のタイトルの値を変更したいのですがタイトル初期値
のまま変わりません。
pages/page.vue
からh1Text
を呼び出すと表示したいタイトル
が取得できます。
他のコンポーネントからの変更は受け取れないのでしょうか?
components/Heading1.vue
のh1Text
の宣言をrefにしてみてもダメでした。
``
layout/default.vue
<template lang="pug">
v-app
Heading1
slot
</template>
pages/page.vue
<template lang="pug">
NuxtLayout
| ページ本体
</template>
<script lang="ts" setup>
import { useOperationInsurance } from '~/composables/useOperation'
const { setHeading } = useOperationInsurance()
const title = '表示したいタイトル'
setHeading(title)
</script>
components/Heading1.vue
<template lang="pug">
.heading
h1 {{h1Text}}
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useOperationInsurance } from '~/composables/useOperation'
const useOperation = useOperationInsurance()
const { h1Text } = useOperation
</script>
composable/useOperation.vue
import { reactive, Ref, toRefs } from 'vue'
import { Operation } from '~/types/operation'
export const useOperationInsurance = (): {
h1Text: Ref<string>
setHeading: (title: string, breadcrumbs: Breadcrumb[]) => void
} => {
const state: Operation = reactive({
h1Text: 'タイトル初期値',
})
const setHeading = (title: string) => {
state.h1Text = title
}
return {
...toRefs(state),
setHeading,
}
}