Vue
VuetifyのSnackbarをVuexで定義してどこでも使い回す方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
目次
オススメ本
Vuetify の Snackbar は、データを保存した時や削除した時など、何度も使うことが多いです。
なので、どこでも使えるように、Vuex で定義していきましょう。
Vuetify の Snackbar とは
Vuetify は、Vue の UI フレームワークです。
便利なコンポーネントが用意されており、コピペで簡単に便利な UI を実装することができます。
また、props で受け渡す内容によって、設定を簡単に変更させることができます。
Snackbar は、v-model を True にすると数秒間、フラッシュメッセージを出すことができるコンポーネントになります。
こういう表示です。
Snackbar を Vuex で実装
Vuex が使えるようにするには、こちらの記事に書いています。
ディレクトリ構成
①js/store/index.js ファイルを作成します。
②js/store/modules/util.js ファイルを作成します。
スクショのようなディレクトリ構成でいきます。
index.js に書く
ファイル名はなんでも良いです。
今回は、util.js を import して、modules に定義してください。
import Vue from "vue"
import Vuex from "vuex"
import util from "./modules/util"
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
util,
},
})
util.js に書く
util.js には、どこからでも呼べる関数を定義します。
actions に関数を定義する。mutations に state を変更する記述を書く。という感じでやっています。
const getters = {}
const state = {
//初期状態を定義
text: "",
snackbar: false,
}
const mutations = {
//stateをmutationsで変更する。
setSnackbar: (state, text) => {
state.snackbar = true
state.text = text
},
unsetSnackbar: () => {
state.snackbar = false
state.text = ""
},
}
const actions = {
//スナックバーを表示させる時の関数(第 一引数に表示するテキストの内容)
openSnackbar: ({ commit }, text) => {
//mutationsを発動させる。テキストの内容を引数で持たせる
//commit('mutatiuonsの関数名')でmutationsを発動させられる
commit("setSnackbar", text)
},
//スナックバーを非表示にする関数
closeSnackbar: ({ commit }) => {
commit("unsetSnackbar")
},
}
export default {
namespaced: true,
getters,
state,
mutations,
actions,
}
これで Vuex の記述は完了です。
VueComponent で呼び出す
HomeComponent.vue
<template>
<div>
<v-btn @click="openSnackbar('すなっくばーだよ')"
>ボタンを押したらスナックバーが発動</v-btn
>
<!-- v-modelがtrueになったらしばらく表示される -->
<v-snackbar v-model="$store.state.util.snackbar">
<!-- Snackbar内に表示するテキスト -->
{{ $store.state.util.text }}
<template v-slot:action="{ attrs }">
<!-- ボタンを押したらcloseする -->
<v-btn color="pink" text v-bind="attrs" @click="closeSnackbar">
Close
</v-btn>
</template>
</v-snackbar>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
methods: {
//mapActionsでVuexに記述した関数を使うっていう宣言をします。
//他にも使う方法自体はありますが、mapActionsを使うことにより「openSnackbar」という関数名で呼び出せるようになります。
...mapActions("util", ["openSnackbar", "closeSnackbar"]),
},
};
</script>
早速ボタンを押してみましょう