nuxtServerInit 与 vuex-module-decorators

Posted 2023-02-22

【中文标题】nuxtServerInit 与 vuex-module-decorators

【英文标题】：nuxtServerInit with vuex-module-decorators

【发布时间】：2020-03-07 22:14:26

【问题描述】：

将此方法与 Nuxt 一起使用：https://github.com/championswimmer/vuex-module-decorators#accessing-modules-with-nuxtjs

存储/索引.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 

存储/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 不会触发动作调度。

【问题讨论】：

你输入的是nuxtServerInit( displatch )而不是dispatch

@Ifaruki 我在这里手动输入了这个代码，我在实际代码中没有那个错字，谢谢。

您的应用程序处于“通用”模式而不是“水疗中心”模式，对吧？在通用模式下，nuxtServerInit 应该在服务器端（而不是客户端）触发

它是通用的。它在服务器端触发，但 nuxt 也在控制台的 s-s-r 下拉菜单下的浏览器中触发。

【参考方案1】：

存储/索引.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 ;

【参考方案2】：

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

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.