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