vuex-module-decoratorsでnuxtServerInitするときは、store/index.tsにactionsを追加する

公式ガイドのストアのページで紹介されていたvuex-module-decorators

nuxtServerInitをどこに書けばいいか迷ったので、いろいろ調べたときの備忘録。

こんな感じでstore/index.tsに追加するっぽい

import { ActionTree, Store } from "vuex";
import { ActionContext } from "vuex/types";
import { Context } from "@nuxt/types";
import { initialiseStores } from "~/utils/store-accessor";

// RootStateを追加
export const state = () => ({});
export type RootState = ReturnType<typeof state>;

const initializer = (store: Store<any>) => initialiseStores(store);
export const plugins = [initializer];

// Rootのactionsを追加
export const actions: ActionTree<any, any> = {
  nuxtServerInit: async (
    context: ActionContext<RootState, RootState>,
    server: Context
  ) => {
    // nuxtServerInitの処理
  }
};

export * from "~/utils/store-accessor";

ほかの導入する部分は、以下の記事を参照。

Nuxt+TypeScript+Firebaseのはじめるときにやること: 2019年12月版 - くらげになりたい。

以上!!

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

Originally published at www.memory-lovers.blog
ツイッターでシェア
みんなに共有、忘れないようにメモ

きらぷか@積読ハウマッチ/SSSAPIなど

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい #DMでお仕事募集はお休み中 Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント