where to use nuxtServerInit()?

[avxkim]

Using this approach with Nuxt: https://github.com/championswimmer/vuex-module-decorators#accessing-modules-with-nuxtjs

store/index.ts:

import { Store } from 'vuex'
import { initialiseStores } from '~/utils/store-accessor'

const initializer = (store: Store<any>) => initialiseStores(store)

export const plugins = [initializer]
export * from '~/utils/store-accessor'

utils/store-accessor.ts:

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import settingsModule from '~/store/settingsModule'

// eslint-disable-next-line
let settingsStore: settingsModule

// noinspection JSUnusedGlobalSymbols
function initialiseStores(store: Store<any>): void {
  settingsStore = getModule(settingsModule, store)
}

export { initialiseStores, settingsStore }

store/settingsModule.ts:

import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators'

@Module({
  name: 'settingsModule',
  namespaced: true,
  stateFactory: true
})
export default class settingsModule extends VuexModule {
  public videos: any[] = []

  @Mutation
  public SAVE_VIDEOS(value: any) {
    this.videos = value
  }

  @Action({ commit: 'SAVE_VIDEOS' })
  public saveVideos(value: any) {
    return value
  }

  // noinspection JSUnusedGlobalSymbols
  get videosArray() {
    return this.videos
  }
}

How do i actually call nuxtServerInit()? If i try inside "store/index.ts":

export const actions: ActionTree<any, any> = {
  async nuxtServerInit({ displatch }) {
    await dispatch('settingsModule/saveVideos', [1, 2, 3, 4, 5], { root: true })
  }
}

Doesn't fire my action

[andynunes]

I have the same issue and question.

[pgzm29]

I had the same issue and managed to execute the first action inside of a plugin, the only downside is that it is a custom action, and not the nuxtServerInit action, but for my requirements, it works fine.

Note: I am working with universal mode

import { Context } from "@nuxt/types"
import { createStore } from "../utils/store-accesor"

export default (ctx: Context, inject) => {
  // Create the store (I am doing this for my own code to avoid calling getModule on each component I want to dispatch an action)
  const _store = createStore(ctx.store)
  // Dispatch the first action (This is where I can check if the user is logged in, etc)
  ctx.store.dispatch("startup/init", ctx, { root: true })
  // Inject the store
  inject("appStore", _store)
}

I hope this can help you

[unlimittt]

Here is where to use nextServerInit(): https://github.com/championswimmer/vuex-module-decorators/issues/80#issuecomment-500374511

[gaohui1314]

store/settingsModule.ts：

import { store } from '@/store'

@Module({
  name: 'settingsModule',
  stateFactory: true,
  namespaced: true,
  dynamic: true,
  store,
})
export default class settingsModuleextends VuexModule {
 // The internal operation

  @Action
  async obtainListData() {
     // An asynchronous request
    const { data } = await $GetClassification()
    this.context.commit('mutationName', data)
  }
}

store/index.ts：

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

export const actions: ActionTree<RootState, RootState> = {
  async nuxtServerInit({ commit, dispatch }, { req, route }) {
       await dispatch('router/setParams', route)
 }
}