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

16700 ワード
コンポーネント nuxt.js JavaScript Vue.js JavaScript テキストリンク

前置き

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

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

Vuexとは

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

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

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

メリット

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

使い方

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

ターミナル
npm install vuex --save

使い方(超簡単ver.)

まずは分かりやすく
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.)

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

🌟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とか親でどう処理するかとか
いちいち分けたり何度も書く必要が出てきます。

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>
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