Nuxtのstoreのファイル構成、呼べ出し方について

Question

Nuxtのstoreフォルダ内にindex.jsとsample.jsというファイルを置きました。
値を呼び出す際の参照の仕方に違いがあったので質問させていただきます。

store----index.js
     |
     |
     ----sample.js

どちらもモジュールモードでかいています。

//index.js
export const state = () => ({
  isMenuActive: 'aaaaa'
})

// sample.js
export const state = () => ({
  isSample: 'aaaaa'
})

呼び出す

$store.state.isMenuActive  
$store.state.sample.isPortfolioApi 

どちらも'aaaaa'という値がとれるのですが、index.jsの場合ファイル名を指定せず呼びだすことができ、その他はファイル名を書いて呼びだすという認識であってますか？

また、index.jsとその他のファイルの使い分けについてご教示いただきると助かります。

Answer 1

どちらも'aaaaa'という値がとれるのですが、index.jsの場合ファイル名を指定せず呼びだすことができ、その他はファイル名を書いて呼びだすという認識であってますか？

あっています。storeフォルダ内のindex.js以外のjsファイルがexportするstate, actions, mutationsはNuxtによって自動的にそのファイル名のnamespaceに登録されます。

Vuex Store - Nuxt.js

namespace自体はVuexの機能であり、store内に階層構造を作ることで管理しやすくなったり、名前の衝突を防ぐことができるなどのメリットがあります。

Namespacing - Vuex

Comments

[退会済みユーザー]

namespaceというVuexの機能があったのですね！
理解できすっきりしました。
回答ありがとうございます！