🚡

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

2021/12/20に公開約1,500字

概要

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

対応方針

実装サンプル

まずは、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

ログインするとコメントできます