モジュールモードでstoreのactionsに引数の渡し方

Question

nuxt.js(SSR)　モジュールモードでstoreのactionsの引数の渡し方

/store/test.js

export const state = () => {
  return {
    test: ""
  };
};

export const getters = {
  getTest(state) {
    return state.test;
  }
}

export const mutations = {
  setTest(state, data) {
    state.test = data;
  }
}

export const actions = namespace => {
  return {
    async getTest({commit, dispatch, rootState, state}, payload) {
      const {data} = await this.$axios.get(
        `test/${namespace}/tests`
      );
      commit("setTest", data);
    }
  }
}
export default namespace => {
  return {
    namespaced: true,
    state,
    getters,
    mutations,
    actions: actions(namespace)
  };
};

/store/index.js

import testModule from './test.js';

export const actions = {
  async nuxtServerInit({ state, commit, dispatch }){
    await Promise.all([
      dispatch("auth/check")
    ]);
  },
  nuxtClientInit({ dispatch }) {
    testModule("default")
  }
};

発生している問題・エラーメッセージ

Nuxt.jsの3系から、classicモードが廃止されるため、
現在、nuxt.jsのstore内部をclassic modeから
module modeに書き換える作業を行なっております。
上記の形式でclassicモードでは動いていたのですが、
moduleモードに書き換えると
他のコンポーネントやvueファイル等からgetterを呼び出したりすると
下記のエラーが発生します。
actions、mutations、も同様に他から呼び出そうとするとエラーが発生します。

良い書き換え方法をご存知の方おられたら、ご教授して頂けませんでしょうか？

エラーメッセージ

 ERROR  [vuex] unknown getter: test/getTest     

補足情報（FW/ツールのバージョンなど）

Nuxt.js 2.9.1

Vue.js 3.8.4

SSRモード

storeはclassicモードからmoduleモード書き換え最中

Answer 1

モジュールモードで使われない手法がいくつかあるようですので、それらを解消することで問題は解決するかと思われます。

モジュールモードではstoreディレクトリ内のすべての*.jsファイルが名前空間付きモジュールに自動変換されますので「store/index.js」にインポートで名前空間付きモジュールをインポートして何か処理をする必要はありません。

/store/index.js

-import testModule from './test.js';
-
export const actions = {
  async nuxtServerInit({ state, commit, dispatch }){
    await Promise.all([
      dispatch("auth/check")
    ]);
  },
  nuxtClientInit({ dispatch }) {
-    testModule("default")
+    dispatch('test/getTest', 'default')
  }
};

名前空間付きモジュール側ですが、デフォルトエクスポートは不要です。
ミューテーション、アクションはオブジェクトとする必要があるため、アクション部分は以下のように書き換えたほうがよろしいかと思います。

/store/test.js

-export const actions = namespace => {
-  return {
-    async getTest({commit, dispatch, rootState, state}, payload) {
-      const {data} = await this.$axios.get(
-        `test/${namespace}/tests`
-      );
-      commit("setTest", data);
-    }
-  }
-}
+export const actions = {
+  async getTest({commit}, payload) {
+    const {data} = await this.$axios.get(
+      `test/${payload}/tests`
+    );
+    commit("setTest", data);
+  }
+}
-export default namespace => {
-  return {
-    namespaced: true,
-    state,
-    getters,
-    mutations,
-    actions: actions(namespace)
-  };
-};

Comments

[laravel5]

やはり、上記の形式にしか記述できないのですね！
ありがとう御座いました！