

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

`pages/page.vue`から`h1Text`を呼び出すと`表示したいタイトル`が取得できます。  
他のコンポーネントからの変更は受け取れないのでしょうか？  
`components/Heading1.vue`の`h1Text`の宣言をrefにしてみてもダメでした。

``

layout/default.vue

[code]

    <template lang="pug">
    v-app
      Heading1
      slot
    </template>
    
    
[/code]

pages/page.vue

[code]

    <template lang="pug">
    NuxtLayout
      | ページ本体
    
    </template>
    
    <script lang="ts" setup>
    import { useOperationInsurance } from '~/composables/useOperation'
    
    const { setHeading } = useOperationInsurance()
    const title = '表示したいタイトル'
    setHeading(title)
    </script>
    
[/code]

components/Heading1.vue

[code]

    <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>
    
[/code]

composable/useOperation.vue

[code]

    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,
      }
    }
    
[/code]


CC BY-SA 4.0
2023-03-31T06:50:50.153
94386
2023-04-17T02:27:25.620
16768
question
javascript vue.js nuxt.js
nux3でcomposableの値を取得したい


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

[code]

    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,
          }
        }
    
[/code]


CC BY-SA 4.0
2023-04-17T02:27:25.620
94543
2023-04-17T02:27:25.620
16768
94386
answer