How to make visible the "nuxtServerInit" action for Nuxt.js action in the case with dynamic modules only?

687 Views Asked by At

According this answer, below listing from the vuex-module-decorators official documentation

// @/store/index.ts
import Vuex from 'vuex'

const store = new Vuex.Store({
  /*
  Ideally if all your modules are dynamic
  then your store is registered initially
  as a completely empty object
  */
})

in the Nuxt case must be:

import Vue from "vue";
import Vuex, { Store } from "vuex";


Vue.use(Vuex);

export const store: Store<unknown> = new Vuex.Store<unknown>({});

But how to integrate the nuxtServerInit action is above methodology? In below listing of store/index.ts, the nuxtServerInit will not be called.

import Vue from "vue";
import Vuex, { Store } from "vuex";


Vue.use(Vuex);

export const store: Store<unknown> = new Vuex.Store<unknown>({
  actions: {
    nuxtServerInit(context: unknown): void {
      console.log("Called !");
      console.log(context);
    }
  }
});
1

There are 1 best solutions below

2
On

nuxtServerInit can be used only in store/index.js file, this is server side action and can not be used from the client side.

Only the primary module (in store/index.js) will receive this action. You'll need to chain your module actions from there.

The nuxtServerInit Action If the action nuxtServerInit is defined in the store and the mode is universal, Nuxt will call it with the context (only from the server-side). It's useful when we have some data on the server we want to give directly to the client-side.