🚡

【Vue.js】Nuxt3でComposables directoryを使ってグローバルstateを管理する

2021/12/21に公開

Nuxt

Vue.js

tech

概要

2021年12月時点でNuxt3はまだベータ版ですが、現時点でグローバルstateをどう管理すれば良いのか、というのを試してみましたのでメモ書きします。なお、正式版では仕様等変わっている可能性があるので、あくまでベータ版での参考までという位置付けになります。

対応方針

nuxt3のuseStateでページ遷移しても消えない状態管理。vuexもpluginも不要。の記事にある通り、Nuxt3ではuseStateの機能でグローバルstateを管理できるので、この機能を使用します。
stateの定義は、こちらもNuxt3の機能であるComposables directoryを使用したいと思います。Composables directoryではこちらのドキュメントの通り、各Componentでimportを書かなくても呼び出しができるものになります。

実装サンプル

まずは、Composables directoryでのグローバルステートの定義の実装。

composables/globalState.js

import { useState } from "#app";

export const useUserState = () => {
  return useState("user", () => {
    return { user: undefined };
  });
};

そして、ComponentでのグローバルStateの呼び出しの実装。

UserComponent.js

<template>
  <div v-if="userState.user">
    <span>{{ userState.user.name }}さんでログイン中</span>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import useAuthFunction from "../customFunction/AuthFunctionComponent";

export default defineComponent({
  async setup() {
    // グローバルstateを取得
    const userState = useUserState();
    const { getUserFromToken } = useAuthFunction();
    
    if (process.client) {
      // localStorageからユーザ情報を取得（詳細は記載割愛）
      const userFromToken = await getUserFromToken(window.localStorage);
      // グローバルstateを更新
      userState.value = {
        user: userFromToken,
      };
    }
    return { userState };
  },
});
</script>

概要

対応方針

実装サンプル

Discussion