【Nuxt.js】Vuex基礎編：コードをスッキリさせよう

# 前置き

Happy Valentine❤️🍫
ということで(？)本日はVuex！
3つに分けて書きます✍️
・vuexとは何か
・メリットは
・簡単な使い方

公開予定日を過ぎ、
申し訳ございません🙇‍♀️
自社開発アプリを進めておりました📱

# Vuexとは

状態管理のライブラリです。
って言ってもイメージ沸かないので…

**簡単に言うとデータ保存ができるもの**
・ログイン情報が
　ページ遷移後も保持されたり、
・APIのデータ引っ張ってきて保存とか、
・methodsに何度も同じ処理書かずに済む
とかとか。
$emitも何回も書かなくていいし楽！
**とにかく楽！！！**そんな感じです。

状態保持をするのでstoreに書きます✍️



# メリット

上記の内容がそのままメリット
コードもまとまって楽ちんなのは
このあとの**未使用・使用の比較**
を見ていただければ分かります👀

# 使い方

とにかくまずインストール

```bash:ターミナル
npm install vuex --save
```

https://vuex.vuejs.org/ja/installation.html

# 使い方(超簡単ver.)
![vuex.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f6c79a04-30ea-7238-38d4-455f1872aa38.gif)

まずは分かりやすく
components使わず
pagesだけで完結させます。

```store/index.js

export const state = () => ({
 counter: 0
})

export const mutations = {
 increase(state) {
   state.counter++
 },
 decrease(state) {
   state.counter--
 }
}
```

```index.vue

<template>
 <div class="container">
   <button @click="increase">increase</button>
   <button @click="decrease">decrease</button>
   {{ $store.state.counter }}
 </div>
</template>

<script>
export default {
 methods: {
   increase () {
     this.$store.commit('increase')
   },
   decrease () {
    this.$store.commit('decrease')
   },
 },
}
</script>
```




🎈🧸
今度はvuexを使用しない場合
それぞれの対応箇所が分かりますね。
**・dataがstate
・methodsがmutations**

```index.vue
<template>
<div class="container">
  <button @click="increase">increase</button>
  <button @click="decrease">decrease</button>
  {{ counter }}
</div>
</template>

<script>
export default {
 data () {
   return {
     counter: 0,
   }
 },
methods: {
  increase () {
   this.counter++;
  },
  decrease () {
   this.counter--;
  },
},
}
</script>
```

# 使い方(Components使用ver.)
![vuex.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/e3684708-cc0a-81ff-b543-71957165a2a2.gif)

作るものは全く同じです。
コンポーネント化するだけです！

🌟**Point**
・index.jsはバグるので新しいjsファイルを作成。
・そのため呼び出し方が変わります。
・gettersでstateの状態を取得する必要あり。

```counter.js

export const state = () => ({
 counter: 0
})
export const mutations = {
 increase(state) {
   state.counter++
 },
 decrease(state) {
   state.counter--
 }
}
export const getters = {
 counter: state => {
   return state.counter
 }
}
```

**Counter.vue(子コンポーネント)**
ここで呼び出し方が
'ファイル名/定義した物' に変わります🌟

```Counter.vue
<template>
<div class="container">
  <button @click="$store.commit('counter/increase')">increase</button>
  <button @click="$store.commit('counter/decrease')">decrease</button>
  {{ counter }}
</div>
</template>

<script>
export default {
 computed: {
   counter () {
     return this.$store.getters['counter/counter']
   },
 },
}
</script>
```

**index.vue(親ページ)**
親には何も書かず超スッキリ🌟🌱

```index.vue
<template>
 <div class="container">
   <Counter />
 </div>
</template>

<script>
import Counter from '~/components/Counter.vue';

export default {
 components: {
   Counter,
 },
}
</script>
```




🎈🧸
vuexを使わないと
$emitとか親でどう処理するかとか
いちいち分けたり何度も書く必要が出てきます。

```vue:Counter.vue(子コンポーネント)

<template>
<div class="container">
  <button @click="$emit('increase')">increase</button>
  <button @click="$emit('decrease')">decrease</button>
  {{ counter }}
</div>
</template>

<script>
export default {
 props: {
   counter: Number
 },
}
</script>
```

```vue:index.vue(親ページ)

<template>
 <div class="container">
   <Counter
     :counter="counter"
     @increase="increase"
     @decrease="decrease"
   />
 </div>
</template>

<script>
import Counter from '~/components/Counter.vue';

export default {
 components: {
   Counter,
 },
 data () {
   return {
     counter: 0
   }
 },
methods: {
  increase () {
    this.counter++;
  },
  decrease () {
    this.counter--;
  }
},
}
</script>
```


記事が公開したときにわかる様に、
note・Twitterフォローをお願いします😀
https://twitter.com/aLizlab