前置き
色々と便利なVuex！
でも何が便利なのかピンとこないし
使うにしても導入面倒くさそ😕
なんて思ってませんか！？
めちゃくちゃ簡単に解説しましたよ🌟
5分で導入、使用できるのでやってみてください💕
Contents
Vuexとは
状態管理のライブラリです。
って言ってもイメージ沸かないので…
簡単に言うとデータ保存ができるもの
・ログイン情報が
ページ遷移後も保持されたり、
・APIのデータ引っ張ってきて保存とか、
・methodsに何度も同じ処理書かずに済む
とかとか。
$emitも何回も書かなくていいし楽！
とにかく楽！！！そんな感じです。
状態保持をするのでstoreに書きます✍️
メリット
上記の内容がそのままメリット
コードもまとまって楽ちんなのは
このあとの未使用・使用の比較
を見ていただければ分かります👀
Vuexの使い方
今回作るのはこちらです🌟
Vuexのインストール
terminal
npm install vuex --save
使い方(pages/index.vueのみver.)
まずは分かりやすく
components使わず
pagesだけで完結させます。
比較：Vuex使用
) file
|
1 2 3 4 5 6 7 8 9 10 11 12 |
export const state = () => ({ counter: 0 }) export const mutations = { increase(state) { state.counter++ }, decrease(state) { state.counter-- } } |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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使用
) file
Point!
- index.jsはバグりやすいので新しいjsファイルを作成
- そのため呼び出し方が変わります！
- gettersでstateの状態を取得する必要あり
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
export const state = () => ({ counter: 0 }) export const mutations = { increase(state) { state.counter++ }, decrease(state) { state.counter-- } } export const getters = { counter: state => { return state.counter } } |
) components
ここで呼び出し方が
'ファイル名/定義した物' に変わります🌟
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
) pages
親には何も書かず超スッキリ🌟🌱
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div class="container"> <Counter /> </div> </template> <script> import Counter from '~/components/Counter.vue'; export default { components: { Counter, }, } </script> |
比較：Vuex未使用
$emitとか親でどう処理するかとか
いちいち分けたり何度も書く必要が出てきます。
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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> |