📘

CDN版Vuexでstoreは使えるがthis.$storeが認識されない謎

2022/09/02に公開

Vue.js

「CDN版Vuexでstoreは使えるがthis.$storeが認識されない謎」

共用レンタルサーバーでVueを動かす必要があるので色々と試行錯誤中です。

「CDN版Vueで親と子のコンポーネント間で通信して値を同期させてみる」記事で親子間の通信はなんとかなったのだが、もっと複雑なコンポーネント間のデータの受け渡しをしたくてVuexの学習し始めました。

CDN版Vueで親と子のコンポーネント間で通信して値を同期させてみる

storeが認識されない問題

とりあえずVuexの概念は分かったのだが、参考サイトにあるようにならない。
というか、エラーがでる。なぜ……。

【Vuex】CDNでVuexの最初の一歩を踏み出す

Vue.jsのstateの動きをCDN版で確認する

vue + vuex + vue-router のwebpackなしサンプル（コピペでできる）

出る箇所は「new Vue」に「store」を登録した後に「$store.state.count」が参照できないこと。

new Vue({
    el: '#app',
    // storeオプションを使用
    store,
    computed: {
        count () {
            return this.$store.state.count;
        }
    }
});

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'state')"

と

Uncaught TypeError: Cannot read properties of undefined (reading 'state')

というエラーが出る。

参考図書にも「store」をVueアプリケーションに登録する流れは載ってるけどやり方は一緒なんだよね。
ずっーーーと悩み続けたが結局解決できずじまいです。
CDNでVueを使っているせいなのか、自分のコードが間違っているのか、それともバージョンやら仕様が変わったせいなのか色々と試して考えたが未解決のまま。

Vueアプリケーションにstoreを登録しなくても使えるし、算出プロパティのcomputedのgetとsetでストアデータを更新できることは分かったのだが、気持ち悪いことこの上ない。

「store」をVueアプリケーションに登録すればリアクティブデータになり、どのコンポーネントからも更新や呼び出しが同期できるらしいのだが……。

単純にして試してみたのがこのコード。

index.html

<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex"></script>
        <title>Vuexのテスト</title>
    </head>
    <body>

    <div id="app">{{count}}</div>

<script>

const store = new Vuex.Store(
{
    state       :
    {
        count   : 0 ,
    },
    mutations   :
    {
        increment( state , num )
        {
            state.count += 1;
        },
    },
});

//ストアの値を確認
console.log( store.state.count );
//値を増やす
store.commit( 'increment' );
//再度値を確認
console.log( store.state.count );

const vue = new Vue(
{
    el          : '#app',
    store ,
    computed    :
    {
        count()
        {
            return this.$store.state.count;
        }
    }

});

</script>

    </body>

</html>

ストアのデータは「store.state.count」ではVueの外でも中でも取れるのだが、Vue内で「this.$store.state.count」では取れない。
なぜ？

storeが認識されない問題

Discussion