1

components/Heading1.vueはレイアウトに組み込まれています。
pages/page.vueからcomposable/useOperation.vueを経由してcomponents/Heading1.vueのタイトルの値を変更したいのですがタイトル初期値のまま変わりません。

pages/page.vueからh1Textを呼び出すと表示したいタイトルが取得できます。
他のコンポーネントからの変更は受け取れないのでしょうか?
components/Heading1.vueh1Textの宣言を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,
  }
}

1 件の回答 1

0

setHeadingを外に出さないといけないようです。

import { reactive, Ref, toRefs } from 'vue'
    import { Operation } from '~/types/operation'
    
    const setHeading = (title: string) => {
        state.h1Text = title
    }
    
    export const useOperationInsurance = (): {
      h1Text: Ref<string>
      setHeading: (title: string, breadcrumbs: Breadcrumb[]) => void
    } => {
      const state: Operation = reactive({
        h1Text: 'タイトル初期値',
      })
    
      
    
      return {
        ...toRefs(state),
        setHeading,
      }
    }

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。