Question

将此方法与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 })
  }
}

当我加载Web应用程序时，nuxt不会触发动作调度。

Answer 1

确保初始化商店：

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.

}}

Answer 2

store/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 };

具有vuex-module-decorators的nuxtServerInit

2 个答案: