Nuxtでfetchを使う場合、各ファイルでexportしないといけないのか

Question

ナビゲーションを作る際、ページが変わる時にナビゲーションを閉じるようにしたかったためにapp/store/index.jsに以下のような記述をしました。

import Vuex from 'vuex'

const store = () => new Vuex.Store({
  state: {
    isMenuActive: false
  },
  mutations: {
    toggleMenu(state) {
      state.isMenuActive = !state.isMenuActive
    },
    resetMenu(state) {
      state.isMenuActive = false
    }
  }
})

export default store

そして全ページにこの読み込みを行いたいため
app/layouts/default.vueに

export default {
  components: {
    TheHeader,
    TheFooter
  },
   resetMenu(state) {
     state.isMenuActive = false
   }
}

と書いたのですが読み込まれていないようです。

   resetMenu(state) {
     state.isMenuActive = false
   }

の記述は適用したいページ全てに記載しないといけないのでしょうか？

Answer 1

Nuxt ないしは Vue.js の使い方に大きな誤解があるように思います。
結論から申し上げますと、複数のページに共通機能を書く必要はなく、 default.vue などの共通で読み込まれるファイルにコードを記述することになると思います。

ただ、おそらく複数の勘違いが複合的に発生し、意図したことを実現できていないので、ひとつづつ解決していかれるのが良いと思います。（個人的には、いきなり Nuxt を利用するのではなく、 Vue, Vuex, VueRouter と順に一つづつ学習を進められることをお勧めしたいです。）

今提示いただいているコードから目的を達成するまでに必要な技術すべてを解説するとかなりの量になってしまうので、ざっくりと、見えている部分の問題点だけ解説させていただきます。

単一ファイルコンポーネントの書式

default.vue のような、拡張子が .vue となっているファイルは、単一ファイルコンポーネントと呼ばれ、書式が決まっています。

提示のコードでは、

resetMenu(state) {
  state.isMenuActive = false
}

の部分が書式に則っていないため、無視されている(あるいはエラーになって実行を妨げている)ものと思います。
単一ファイルコンポーネントで利用できる項目は、Vue API リファレンス の、オプション　と記載されている項目になります。

いずれにせよ、Vue ストアの state オブジェクトを受け取るような機能は無いので、提示いただいたコードは誤りかと思います。

ページが変わるたびに実行

ご提示のコードでは、 ページが変わるたびに実行する という肝心なところのコードが記述されていません。方法はいろいろ考えられますが、スマートなのは こちらの Qiita のページに記載の方法かと思います。

ナビゲーションの開閉処理

いうまでもないことですが、ストアにあるデータを書き換えた際に、ナビゲーションを閉じたり開いたりするためには、ナビゲーションの開閉状態とストアのデータが何らかの手段で連携していなければいけません。
ナビゲーション部分の定義（おそらく default.vue の <template> タグ内に記載がある）に、そのための記述が必要です。（さらに記述の仕方次第では、ストアのデータを取り込むコードを <script> 以下に記載するなども必要になってくるかと思います）。

プログラムの流れ

ストアで resetMenu メソッドを定義し、state.isMenuActive を変更する関数をわざわざ定義したにも関わらず、default.vue ではそのメソッドを呼び出さず、直接 state.isMenuActive を書き換えようとしたりと、全体のプログラムの流れが理解できていないように思います。

プログラムは正確に記述しなければ大抵の場合意図しない結果をもたらすので、まずは Nuxt のガイド を読むなどして、 Nuxt の各ファイル、各項目の機能を知り開発を行われるとよいと思います。

Comments

[退会済みユーザー]

勉強不足でした。おっしゃる通り理解が足りないので順をおって理解していきたいと思います。回答ありがとうございました。