vuex-module-decorator를 사용한nuxtServerInit

vuex-module-decorator를 사용한nuxtServerInit

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
  }
}

실제로 어떻게 전화해야 하죠?nuxtServerInit()? "store/index.ts"에서 시도하면:

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

웹 앱을 로드할 때 nuxt에서 액션 디스패치가 실행되지 않습니다.

스토어/index.ts

// https://github.com/championswimmer/vuex-module-decorators#accessing-modules-with-nuxtjs
import { Store } from "vuex";
import { Context } from "@nuxt/types";
import { initialiseStores } from "~/utils/store-accessor";
export * from "~/utils/store-accessor";

export const actions = {
    nuxtServerInit(store: Store<any>, context:Context) {
        console.log(store);
        console.log(context);
    }
};
const initializer = (store: Store<any>) => initialiseStores(store);
export const plugins = [initializer];

의 주문const선언은 차이를 만든다.

utils / store-accessor.ts

/* eslint-disable import/no-mutable-exports */
// https://github.com/championswimmer/vuex-module-decorators#accessing-modules-with-nuxtjs
import { Store } from "vuex";
import { getModule } from "vuex-module-decorators";
import HarmonyStoreModule from "~/store/harmony";

let harmonyStore: HarmonyStoreModule;

function initialiseStores(store: Store<any>): void {
    harmonyStore = getModule(HarmonyStoreModule, store);
}

export { initialiseStores, harmonyStore };

스토어를 초기화해 주세요.

import { Store } from "vuex";
import {initialiseStores, settingsStore } from "~/utils/store-accessor";

const initializer = (store: Store<any>) => initialiseStores(store);
export const plugins = [initializer];
export * from "~/utils/store-accessor";

export const actions = {
  async nuxtServerInit({}, ctx) {

// do it once more like so.. 
    initialiseStores(ctx.store);

// now just import stores from utils..
    settingsStore.saveVideos([1, 2, 3, 4, 5])

// NOTE: 
now all server side functions (asyncData, fetch etc..) will work without the need 
for you to initialize stores only because nuxtServerInit is the very first function 
called once server side. You'll need to call initialiseStores(ctx.store) once more client
side for everything to work (client side) correctly. I suggest using the module
nuxtClientInit and do the same.

}}

언급URL : https://stackoverflow.com/questions/58814678/nuxtserverinit-with-vuex-module-decorators