Vue3でグローバル変数を使う方法を教えてください。

Question

前提

Vue初心者です。
Vue3 のcomposition APIを使っています。

質問

Vue3で、とあるbool値をいろんなコンポーネントから参照したり変更したいため、グローバル変数を作ってそこにboolを保存しておきたいです。

調べた結果

調べた結果、globalPropertiesというのを使うと書いてありました。

なので、main.jsに以下のように書きました。

import { ref } from 'vue

const app = createApp(App)
// 諸々省略
app.config.globalProperties.globalBool = ref(false)
app.use(router).mount('#app'

ただ、これはOption APIで使うことを想定されているらしく、composition APIからこの変数に触れることはできないようでした。

なので、仕方なく以下のようにしてみましたが、setup関数内からmethodsの関数を叩くのは不可能らしいです。

setup(){
    const handleClick() { //クリックハンドラ
        CheckGlobalBool() //エラー: 定義されてません
    }
},
method: {
    CheckGlobalBool() {
        console.log(this.globalBool)
    }
}

行き詰った

こういう経緯で行き詰りました。
グローバル変数を使いたい場合どのようにするのがいいのか、わかりやすく教えていただきたいです。

Answer 1

なので、仕方なく以下のようにしてみましたが、setup関数内からmethodsの関数を叩くのは不可能らしいです。

クロージャーに関して自分で調べてみてください。
ReactやVueなどを始めとしたフレームワーク？はクロージャーって機能が根幹を成しています。

■ 本題
Vueの中でのグローバルという意味なのか、ブラウザの中でのグローバルという意味中存じ上げませんが…

1. Vueの中のグローバル関数であれば、mixinを使いましょう
2. ブラウザ全体(consoleで直接値を参照したいなど…)であれば、window.変数名 = 値と代入すればブラウザ全体での参照が可能です。

とあるbool値をいろんなコンポーネントから参照したり変更したいため、グローバル変数を作ってそこにboolを保存しておきたいです。

これを行いたいなら、状態管理(Vuexなど)しましょう。
mixinを使うとどこに書かれた変数なのかが分からなくなるので、後のメンテナンスを考慮し、状態管理した方がいいです。

Comments

[KOTTON]

ありがとうございます。
ブラウザを更新しても変数の値が保持されるのが望ましかったのですが、localStorageというのを使えばそれを実現できました。(Vuexは更新すると消えるらしいので)
またもう一つ質問なのですが、例えばjsファイルにグローバルスコープで変数を作って、それをエクスポートしてVueコンポーネントから参照するのは、Vuexの状態管理と得られる効果は似たようなものですかね？もちろん管理の面などでVuexが優れているのであろうことは分かるので、必要な場合はVuexを使おうと思いますが、これは単純に興味です！

[Nero1129]

Vuexを永続化したいのであれば、こちらを参照してみてください。
今よりは楽に状態管理できると思います。
https://qiita.com/chenglin/items/0fd9baf386227a5ca614

http://codesandbox.io/
codesandboxで気軽にVueの環境構築をして、検証が出来るので行ってみるといいと思います。検証がめんどくさいは同感ですが、百聞は一見に如かずなので、自分でいろいろ触って、壊してみましょう。理解が深まります。
exportは単に変数宣言しているだけだと認識してもあながち間違いではないと思います。
状態管理はAをBに変更したときに、Bの状態を保持することなので、exportはいくら参照してもAでしかありません。それ故に、状態管理とは意味合いが違います。

P.S. 厳密にはニュアンスが違うので鵜の意味にはせず、理解するための助言程度の留めておいてください。

Answer 2

see: 状態管理

Comments

[KOTTON]

ありがとうございます！