Vuex勉強

Vuexを勉強しました。

まだまだわからないことが多いですが、ちょっとずつ状態管理の意義とかコーディングの雰囲気が掴めてきました。 Vuexを理解していって現場のフロントのコードも読めるようになったり、個人開発にVuexを取り込めるようにしていきたいと思ってます。

現時点で自分が理解してるVuexを使うメリット

• 複数のコンポーネント間で値を受け渡しする際に実装がシンプルになる。(ネストが浅い場合はpropsとemitで十分、Vuexを使う必要性は薄い)
• バグが発生する確率を減らし、コードの保守性を上げる

逆にデメリットは以下のような感じかと

• コードの記述量が増える
• 学習コストがかかる

まあ、今のところ自分のスキルを高めるのが目的なのでデメリットはそこまで気にならない。スピード感を持って個人開発する場合とかは不要になるんでしょうね。 あとはどうやらVuexで管理するべきデータと管理するべきではないデータがあるようなので、その辺りも自分で手を動かして地雷踏みながら学んでいきたいところです。 おそらく自分でアプリ作る際はあまりVuexを使わないかと思ってますが、その時にも「使えない」状態でコーディングするのは避けたいので、メリットとデメリットをある程度理解した上で「使わない」という状態にしたいですね。

以下はちょっと手を動かしてみたコード。

store/index.js

import Vuex from 'vuex'

const testStore = () => {
  return new Vuex.Store({
    state: function() {
      return {
        test: 'This is vuex test.'
      }
    }
  })
}

export default testStore

メモ - アロー関数でtestStore関数を定義(アロー関数なんとなくしかわかってないので要勉強) - stateに値を保管する処理でtestに文字列を格納。 - stateの値を常にfunctionにする。 - 作成したtestStoreをexport defaultでプログラムから使えるようにする。

store/index.jsで用意した値をコンポーネント側から参照する。 pages/index.vue

<template>
  <section class="container">
    <div>
      <p>{{ $store.state.test }}</p>
    </div>

  </section>
</template>

<script>
</script>
<style>
</style>

メモ - $storeでstore/index.jsに記述した値を使うことができる。

yarn devでローカルサーバー起動してブラウザで確認。