【ララはじ #7】 Vue3で状態管理はじめました。

ちょっと、Web系の開発から離れていたので、今時どんな感じになってるのかを確認する為にいろいろやってみた備忘録です。

築山五郎の人生語録より

いわゆるストアですが、今までの知識でやってみます。
大丈夫だよね？たぶん…
え？vuexじゃなくて？piniaってのが流行ってるの？

vuexも使えるけど、piniaというのが新しいのであれば、そっち使っていくでしょ！

まずは、インストール。だけども、vueも明示的にインストールしておかないとエラーになるので、一緒に。

% sail npm install vue --save-dev
% sail npm install pinia --save-dev

piniaが使える様に初期設定をします。resources/js/app.js  を編集します。

import './bootstrap';
import { createApp } from "vue";
import { createPinia } from 'pinia'             // <-- ここ
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import '@mdi/font/css/materialdesignicons.css';
import App from '@/components/App.vue';
import router from '@/router';

const app = createApp(App);
const pinia = createPinia();                    // <-- ここ
const vuetify = createVuetify();
app.use(router);
app.use(pinia);                                 // <-- ここ
app.use(vuetify);
app.mount("#app");

丁度、以前にダッシュボード画面作ったので、ヘッダーの左端にあるハンバーガーボタンをクリックしたときに、サイドバーの表示/非表示が出来るように、その状態を管理してみることに。

とりあえず、resources/js/stores/layout.js という名前でファイルを作成してみます。

import { ref } from 'vue';
import { defineStore } from 'pinia';

export const useLayoutStore = defineStore('layout', () => {
  const isOpenDrawer = ref(false);
  function toggle() {
    isOpenDrawer.value = !isOpenDrawer.value;
  }
  return { isOpenDrawer, toggle };
});

次に、ヘッダーを修正します。ファイルは resources/js/components/layouts/Header.vue ですね。
ハンバーガーボタンのクリックに反応する部分を追記します。

<template>
  <v-app-bar app>
    <v-app-bar-nav-icon @click="layout.toggle">
    </v-app-bar-nav-icon>
    <v-toolbar-title>
      お試しシステム
    </v-toolbar-title>
  </v-app-bar>
</template>

<script setup>
import { useLayoutStore } from '@/stores/layout'
const layout = useLayoutStore();
</script>

最後に、サイドバーを修正します。ファイルは resources/js/components/layouts/Sidebar.vue になりますね。
drawerの開閉部分を追記します。

<template>
  <v-navigation-drawer v-model="layout.isOpenDrawer" app elevation="4">
  </v-navigation-drawer>
</template>

<script setup>
import { useLayoutStore } from '@/stores/layout'
const layout = useLayoutStore();
</script>

おおお！

サイドバーの開閉

ちゃんと状態を各所で使えてるので、いけてるんではないでしょうか…
あとはログイン認証でページをガードすればベースとしてはOKですかねｗ