まずはVuexをダウンロード
npm install vuex
main.js内のVueインスタンスに含まれている全てのコンポーネントでVuexにアクセスできるようにするまでの流れ
- store.jsを作る
- store.jsでVuexでVuexをimportする
- Vue.use(Vuex)でVuexというプラグインを使えるようにする
- new Vue.Store({ })のなかに、Vue.js全体で使える、グローバル変数のようなものを用意する
- main.jsで読み込むために、
export defaultとする - main.jsでstoreを読み込む
- main.jsのnew Vueインスタンス内で、
store:storeとする(es6なので、store,でも可）
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vue.Store({
state:
count:2
})
main.js
import store from "./store";
new Vue ({
store:store
}).$mount("#app")
例えばHome.vueというコンポーネントから$storeにアクセスしたい時
- Home.vueのどこに書いてもいいけど、store.jsの中身が変わったときに、実際にそれを計算してDOMを更新する必要があるのかどうかとかを賢くやってくれるのがcomputedプロパティなので、computedに書く
Home.vue
<template>
<div>
<p>{{ count }}</p>
</div>
</template>
<script>
export default {
computed:{
//⬇︎名前はなんでもいいけどcount()にしとく
counte(){
//$storeは、store.jsのVue.sotreの部分
//stateはstore.jsのそのあとのstate:の部分
return this.$store.state.count
}
}
}
</script>
例えば、また他のページで、カウントしたい時
Header.vue
<template>
<div>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script>
export default {
methods: {
increment(){
this.$store.state.count++;
},
decrement(){
this.$store.state.count--;
}
}
こんな感じでHome.vueと同じように使えます
gettersについて
gettersとは
- Vuex用の算出プロパティ
算出プロパティはcomputedプロパティですよね。
computedプロパティとは
- どのデータを使って、別の計算をするか
それがVuexにもあるという感じ
gettersの使い所
- 式が複雑化してきたときに、その式をいちいち書くことなく、Vuexにまとめることができる どうするかというと、gettersを使う
gettersの使い方
- 下のように書くと、Vuex側で、カウントを2倍するという処理ができる
store.js
export default new Vuex.Store({
state:{
count: 2
},
getters: {
//stateを引数にとる
//state.cuontとすることで、上のcountが取れる
doubleCounter: state => state.count * 2
}
});
例えば、Home.vueにて
先ほどはこのように書いていましたが、
Home.vue
<script>
export default {
computed:{
//⬇︎名前はなんでもいいけどcount()にしとく
counte(){
//$storeは、store.jsのVue.sotreの部分
//stateはstore.jsのそのあとのstate:の部分
return this.$store.state.count
}
}
}
</script>
gettersを使用すると、
Home.vue
<script>
improt { mapGetters } from "vuex"
export default {
computed:{
//ここから
counte(){
return this.$store.getters.doubleCount;
}
}
//ここまで
}
</script>
と、書くことで、countを算出することができる
mapGettersヘルパーについて
computedのなかにgettersを書いてると思うのですが、もっとコンパクトに書きたい時は、
vuexから、mapGettersというものをインポートする。
さっきこのように書いてあった、computedの部分を、、
Home.vue
<script>
improt { mapGetters } from "vuex"
export default {
computed:{
//ここから
//doubleとtripleに計算を増やしてみました
doubleCounte(){
return this.$store.getters.doubleCount;
},
tripleCount(){
return this.$store.getters.tripleCount;
}
}
//ここまで
}
</script>
一旦がさっと削除して、代わりにmapGetters、その中に配列で一つ目にdoubleCount、tripleCountとすると、
Home.vue
<script>
improt { mapGetters } from "vuex"
export default {
computed:mapGetters(["doubleCount","tripleCount"])
}
</script>
という感じで一行で終わるコンパクトさになります
mapGettersの部分を、下記のようにオブジェクトで書いたりもできる
Home.vue
<script>
improt { mapGetters } from "vuex"
export default {
computed:mapGetters({
//キーはなんでもよいが、バリューに`doubleCount`をかく
myComponentDoubleCount:"doubleCount"
})
}
</script>
computedの部分に他にも書きたい、、という場合
- ES6のスプレッド演算子
-
...と書くと、このオブジェクトの中にうまく組み込んでくれる -
...と書くことで、他に書いたcomputedも動く
Home.vue
<script>
improt { mapGetters } from "vuex"
export default {
computed:{
//computedプロパティにオブジェクトではかけないので
...mapGetters([myComponentDoubleCount:"doubleCount"])
},
}
</script>