「Vue.js」の「Vuex」を学ぶ
今回は「コンポーネント」に依存せずに「データの保持・管理」が行える「Vuex」について学んでいきたいと思います。
「Vue.js」の学習は今回で最終回なのですが、これまで「Vue.js」のさまざまな機能について学んできました。
今後も機会があればまた新しい技術について学習を進めていきたいと思います。
「Vuex」の仕組み（１コンポーネント）
「Vuex」では、
- Action
- ミューテーションを「コミット」する。
- Mutation
- 「イベント」に近い概念で「Action」から指定された「Mutation」の処理が実行される。
- State
- 「情報」を保存している源。
- Getter
- 「Stateの値」を取得するために必要。「computed」プロパティに記述する。
の４つの概念があります。
これらの関係性は下図のようになっています。
「コンポーネント」から「Action」が実行され、「Action」から「Mutation」にコミットが送られます。
「Mutation」が受け取ったコミットに応じた処理を実行し「State（情報）」の値を操作します。
プログラムを作ってみると、
<div class="scripts">
<div id="app">
<my-component></my-component>
</div>
<script>
const app = Vue.createApp();
const store = new Vuex.Store({
state: {
score: 0
},
mutations: {
increment(state) {
state.score += Math.ceil(Math.random() * 101);
}
}
}
);
app.component('my-component', {
template: '<div><p>score={{ count }}</p><button @click="increment()">スコアを増やす</button></div>',
methods: {
increment() {
store.commit('increment');
}
},
computed: { //Getter
count() {
return store.state.score
}
}
});
app.mount('#app');
</script>
</div>
のようになります。このプログラムを実行すると、
のようになります。
まず、「Vuex」の「ストア」を作成し、その中に「state」と「mutation」を定義します。
「state」には「score」の値を定義し、「mutations」には、「increment」が「Action」からコミットされた時に実行する処理を書きます。
今回は「ランダムな値」を取得して「scoreの値を増やす処理」を作成しました。
そして「my-component」では、「computedプロパティ」に「stateの値」を返す「Getter」を定義しています。
「Getter」の「count()」を実行することで、「戻り値」に「state」の「scoreの値」が戻ってくるため「scoreの値」を取得することができます。
「Vuex」の仕組み（２コンポーネント）
コンポーネントをもう１つ追加し、「Vuex」の「state」を共有することもできます。
プログラムを作成してみると、
<div class="scripts">
<div id="app">
<my-component></my-component>
<my-component-add></my-component-add>
</div>
<script>
const app = Vue.createApp();
const store = new Vuex.Store({
state: {
score: 0
},
mutations: {
increment(state) {
state.score += Math.ceil(Math.random() * 101);
}
}
}
);
app.component('my-component', {
template: '<div><p>score={{ count }}</p><button @click="increment()">スコアを増やす</button></div>',
methods: {
increment() {
store.commit('increment');
}
},
computed: {
count() {
return store.state.score
}
}
});
app.component('my-component-add', {
template: '<div><p>score={{ count }}</p><button @click="increment()">スコアを増やす</button></div>',
methods: {
increment() {
store.commit('increment');
}
},
computed: {
count() {
return store.state.score
}
}
});
app.mount('#app');
</script>
</div>
のようになります。このプログラムを実行すると、
のようになります。
「my-component-add」コンポーネントを追加していますが、「Vuex」の「state」の「score」を共有しているため、どちらのコンポーネントのボタンをクリックしても、「両方のコンポーネントの値」が更新されます。
このように親子関係の無いコンポーネント間でも、「Vuex」を利用することで、コンポーネント間で値を共有することができます。
これで「Vue.js」の学習は終了となります。
また機会がありましたら、今後もさまざまな技術の習得を行っていきたいと思います。