Why is appContext null for Vuex namespaced modules other than the root module?

brokenthorn
0
brokenthorn
commented 10 months ago

Hello.

I'm basing my app on the typescript-template.
I've built upon the Vuex root module example to create namespaced sub-modules.

For example:

Root module types:

// file '@/types/store.ts'

/** Root state. */
export interface IRootState {
  applicationVersion: string;
  authenticated: boolean;
}

/** Root state actions. */
export interface IRootActions extends ActionTree<IRootState, IRootState> {
  /** Special function called by Nuxt automatically on the server-side to init the store. */
  nuxtServerInit(
    actionContext: ActionContext<IRootState, IRootState>,
    appContext: AppContext
  ): Promise<void>;

  /** Reload all nomenclatures data from backend API. */
  reloadAllNomenclatures(
    actionContext: ActionContext<IRootState, IRootState>,
    appContext: AppContext
  ): Promise<void>;
}

Root module declaration:

// file '@/store/index.ts

export const state = (): IRootState => ({
  applicationVersion: '0.1.0',
  authenticated: true,
});

export const actions: IRootActions = {
  async nuxtServerInit({ dispatch }, { $axios }) {
    log.info('nuxtServerInit dispatched.');
    log.warn(
      `root action test: Do I get Nuxt context and $axios in it?: ${
        $axios ? 'yes' : 'no'
      }`
    );
    try {
      await dispatch('reloadAllNomenclatures');
    } catch (err) {
      log.error(err);
    }
  },
  async reloadAllNomenclatures({ dispatch }) {
    log.info('reloadAllNomenclatures dispatched.');
    try {
      await dispatch('productCreationRequests/reloadProductCreationRequests'); // Take note of this line.
      await dispatch('productCategories/reloadProductCategories');
      await dispatch('productTypes/reloadProductTypes');
      await dispatch('companies/reloadCompanies');
    } catch (err) {
      log.error(err);
    }
  },
};

Submodule types:

// file '@/types/store.ts'

/**
 * Product Creation Requests state.
 */
export interface IProductCreationRequestsState {
  /**
   * Product creation requests list.
   */
  list: IProductCreationRequest[];
}

/**
 * Product Creation Requests state actions.
 */
export interface IProductCreationRequestsActionTree
  extends ActionTree<IProductCreationRequestsState, IRootState> {
  /** Reload product creation requests from backend API. */
  reloadProductCreationRequests(
    actionContext: ActionContext<IProductCreationRequestsState, IRootState>,
    appContext: AppContext
  ): Promise<void>;
}

Submodule declarations:

// file '@store/productCreationRequests.ts'

export const state = (): IProductCreationRequestsState => ({
  list: [],
});

export const actions: IProductCreationRequestsActionTree = {
  async reloadProductCreationRequests({ commit }, { $axios }) {
    log.info('reloadProductCreationRequests dispatched.');
    try {
      const productCreationRequests = await $axios.$get(
        'product-creation-requests'
      );
      commit('setProductCreationRequests', productCreationRequests);
    } catch (err) {
      log.error(err);
    }
  },
};

But then I get this error when refreshing the web browser:

i Type checking in progress...nuxt:typescript 06:47:44
i No type errors foundnuxt:typescript 06:47:46
i Version: typescript 3.8.3nuxt:typescript 06:47:46
i Time: 2431 msnuxt:typescript 06:47:46
i nuxtServerInit dispatched.06:48:00

 WARN  root action test: Do I get Nuxt context and $axios in it?: yes06:48:00

i reloadAllNomenclatures dispatched.06:48:00

 ERROR  Cannot destructure property $axios of 'undefined' or 'null'.06:48:00

  at Store.reloadProductCreationRequests (server.js:4069:5)
  at Array.wrappedActionHandler (node_modules\vuex\dist\vuex.common.js:753:23)
  at Store.dispatch (node_modules\vuex\dist\vuex.common.js:444:15)
  at boundDispatch (node_modules\vuex\dist\vuex.common.js:334:21)
  at Store.reloadAllNomenclatures (server.js:3937:13)
  at Array.wrappedActionHandler (node_modules\vuex\dist\vuex.common.js:753:23)
  at Store.dispatch (node_modules\vuex\dist\vuex.common.js:444:15)
  at boundDispatch (node_modules\vuex\dist\vuex.common.js:334:21)
  at Store.nuxtServerInit (server.js:3925:13)
  at Array.wrappedActionHandler (node_modules\vuex\dist\vuex.common.js:753:23)

Notice the WARN above. That's my testing if { $axios } was destructured in one of the root actions. And it was.

But, it isn't in other modules: notice the ERROR above.

Is it obvious where I'm doing something wrong or do I need to make an MRE?

0
brokenthorn
0
brokenthorn
commented 10 months ago

After a bit more debugging, still can't find the issue, but I did notice that the context is passed to the action only in nuxtServerInit.

The other actions, like reloadAllNomenclatures, etc., even in SSR, are not being passed the Nuxt context.

Note the line: client.js?06a0:50 nuxtServerInit dispatched. ctx: true

DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:3001/vuetify.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
client.js?06a0:49 Nuxt SSR
    client.js?06a0:50 nuxtServerInit dispatched. ctx: true
    client.js?06a0:50 reloadAllNomenclatures dispatched. ctx: undefined
    client.js?06a0:50 reloadProductCreationRequests dispatched. ctx: false
    client.js?06a0:50 reloadProductCategories dispatched. ctx: false
    client.js?06a0:50 reloadProductTypes dispatched. ctx: false
    client.js?06a0:50 reloadCompanies dispatched. ctx: false
vue.runtime.esm.js?2b0e:8440 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
client.js?e0ba:95 [HMR] connected
backend.js:2237  vue-devtools  Detected Vue v2.6.11 

What I'm trying to do is access @nuxtjs/axios in the action handlers using the context, like in the typescript-template example.

On another note, this is set to the nuxt context in the action handlers, but using it, VScode can't resolve it correctly (it resolves it to current ActionTree).

I wish I could solve this myself…

Annotation 2020-04-24 075032.png

0
Informations
QuestionUnresolved
#c58 - Created 10 months ago