Nuxtでvuexのstoreをmodule化するときの注意点
Vuex ストアの モジュール モードを使っている場合はなら、プライマリモジュール(store/index.js)のみ、このアクションを受け取ることができます。その他のモジュールのアクションでも使いたい場合は、プライマリモジュールからチェインする必要があります。
モジュールとして分割したソースの中でnuxtServerInitを呼び出せない
モジュール化したstateをnuxtServerInitから更新するためには下記のようにする(公式の認証ルートの処理をベースとしたもの)
code: store/user.js
const state = () => ({
authSUser: null,
});
const mutate = {
setAuthUser(state, user) {
state.authUser = user;
}
};
// 以下略
code: store/index.js
const actions = {
nuxtServerInit({ commit }, { req }){
if (req.session && req.session.authUser) {
commit('user/setAuthUser', req.session.authUser);
} else {
commit('user/setAuthUser', null);
}
}
};
NuxtでSSRする際にVuexのstoreは関数にする必要があるので要注意
モードに関わらず、サーバーサイドで不要な共有状態を避けるため、state の値は常に function でなければなりません。