Nuxt.jsで内部JSONファイルを読み込みたいがエラーが出る

Nuxt内にjsonファイルを読み込ませたい、またそのデータをいろんなところで使いたいと思い下記のリンクを参考に作成してみました。

ほぼ書き方は同じですが
store/json.js

import jsonData from '~/assets/json/menu.json'

// 状態管理
export const state = () => ({
  data: jsonData,
})

// getters
export const getters = {
  getAll: (state) => {
    // return state.json
    return state.data
  }
}

componentes/Headers.vue

<template>
<pre>{{ jsonAll }}</pre>
</template>

<script>
export default {
  asyncData ({ store }) {
    // jsonAll: store.getters['json/getAll']
    const jsonAll = store.getters['json/getAll']
    return { jsonAll }
  }
}
</script>

エラーが表示されます。

client.js?06a0:43 [Vue warn]: Property or method "jsonAll" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Headders> at components/Headders.vue
       <VApp>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

同じファイルで別の方法を試すも

<template>
<pre>{{ getAll() }}</pre>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  methods: {
    ...mapGetters({ getAll: 'json/getAll' })
  }
}
</script>

unknown getter: json/getAll

pages/index.vueにdataとして保存するやりかたなどが必要なのでしょうか？
いずれもすんなり行かず。

試してみたほうがいい方法や、他に必要な情報等がありましたが追記しましすのでご回答よろしくお願いします。

環境
Nuxt + Vuetify

行動規範の内容に同意します

回答1件

ベストアンサー

2カ所ほど問題と考えられる箇所がありましたのでご確認ください。

stateに定義するプロパティ名はdataなので、getAllメソッドで参照するプロパティ名はstete.dataとなります。

javascript
1import jsonData from '~/assets/json/menu.json'
2
3// 状態管理
4export const state = () => ({
5  data: jsonData,
6})
7
8// getters
9export const getters = {
10  getAll: (state) => {
11    // return state.json
12    return state.data
13  }
14}

asyncDataメソッドで返すオブジェクトがコンポーネントデータとマージされるので、returnで返す必要があります。

javascript
1<script>
2export default {
3  asyncData ({ store }) {
4    // jsonAll: store.getters['json/getAll']
5    const jsonAll = store.getters['json/getAll']
6    return { jsonAll }
7  }
8}
9</script>

なお、今回の事例で言えばasyncDataメソッドを使う必要性はないと考えています。
例えば、以下の方法でvuexで管理するjsonデータを参照できます。

javascript
1<template>
2<pre>{{ getAll() }}</pre>
3</template>
4
5<script>
6import { mapGetters } from 'vuex'
7
8export default {
9  methods: {
10    ...mapGetters({ getAll: 'json/getAll' })
11  }
12}
13</script>