Vuexについて勉強したこと

## まずはVuexをダウンロード
```terminal
npm install vuex
```

## main.js内のVueインスタンスに含まれている全てのコンポーネントでVuexにアクセスできるようにするまでの流れ
1. store.jsを作る
2. store.jsでVuexでVuexをimportする
3. Vue.use(Vuex)でVuexというプラグインを使えるようにする
4. new Vue.Store({  })のなかに、Vue.js全体で使える、グローバル変数のようなものを用意する
5. main.jsで読み込むために、`export default`とする
6. main.jsでstoreを読み込む
7. 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>
```