参考サイト

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

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

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

ディレクトリ構成

これだけです。

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

ソースコード

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を使う利点があるか不明。）

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

参考サイト

ディレクトリ構成

ソースコード

index01.html

index01.js