带有 vuex-module-decorators 的 nuxtServerInit [英] nuxtServerInit with vuex-module-decorators

问题描述

在 Nuxt 中使用这种方法:https://github.com/championswimmer/vuex-module-decorators#accessing-modules-with-nuxtjs

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

store/index.ts:

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:

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:

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"中尝试:

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

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

当我加载我的网络应用程序时，nuxt 不会触发动作分派.

When i load my web-app, nuxt doesn't firing action dispatch.

推荐答案

确保您正在初始化您的商店:

Make sure your initializing your stores:

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.

}}

这篇关于带有 vuex-module-decorators 的 nuxtServerInit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！