Help us understand the problem. What is going on with this article?

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

CDNでVuexの機能を試してみます。内容はこれだけです。

  • state
  • mutations
  • storeオプション

公式サイトに掲載されているコードは、CDNではなく各パッケージのインストールを前提とした内容です。
なので、あくまで動作を簡単に確認したい場合にお試しください〜

参考サイト

Vuexの概要についてはこちらを参考にしました。とても丁寧に説明されています。
Vue.js + Vuexでデータが循環する全体像を図解してみた

ソースコードは公式サイトからまるっとお借りしました。
記事の内容は、下記の範囲になります。

実際の動きを見たい場合は、Scrimbaの動画レッスンが分かりやすいです。
音声は英語ですが、ソースは読めるかと思います。

ディレクトリ構成

これだけです。

vuex_test
  ├── index01.html
  └── index01.js

ソースコード

index01.html

index01.html
<html>
<head>
  <meta charset="utf-8">
  <title>vuex_test</title>
  <!-- Vue.js(開発バージョン) -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- Vuex -->
  <script src="https://unpkg.com/vuex"></script>
  <!-- Vuexを使うときはPromiseも必要 -->
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
</head>
<body>
<div id="app">
  {{ count }}
</div>
<script src="index01.js"></script>
</body>
</html>

index01.js

各パッケージををインストールして使用する場合と、若干書き方が異なります。

index01.js
// cdn(グローバルなスクリプトタグ)でパッケージを呼び出している場合は記述しない
// import Vue from 'vue';
// import Vuex from 'vuex';
// Vue.use(Vuex);

// ストアオブジェクトの作成
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
});

// ミューテーションを通してストアの状態を変更する(countを直接変更しない)
// そのため状態の変更を明確に追跡できる
store.commit('increment');
// ストアの状態を参照する
console.log(store.state.count);

new Vue({
    el: '#app',
    // ストアの状態をコンポーネント内で使うには、算出プロパティ内で状態を返す
    computed: {
        count () {
            return store.state.count
        }
    }
});

storeオプションを使用することにより、このような書き方もできます。
以下、公式サイトからの引用です。

ルートインスタンスに store オプションを渡すことで、渡されたストアをルートの全ての子コンポーネントに注入します。これは this.$store で各コンポーネントから参照することができます。

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

しかし、ヘルパーなどの機能を使いたい場合はCDNだと厳しそうですね・・・(あまり情報出てこないし、そもそもCDNを使う利点があるか不明。)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away