Vuexとは

グローバル変数のように値を設定しておき、どのコンポーネントからでもアクセスできるデータの仕組み

vuexがあることでコンポーネント間のデータのバケツリレーをせずに済む

Vuexの設定

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 2
    }
});

Store()メソッド内に定義したオブジェクトにどのコンポーネントからでもアクセスできる

<template>
  <div>
    <h3>Home</h3>
    <button @click="toUsers">Usersのページに行く</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
</script>

vuexで設定した値の取得だけでなく更新をすることも可能

<template>
  <nav>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </nav>
</template>

<script>
  export default {
    methods: {
      increment() {
        this.$store.state.count++
      },
      decrement() {
        this.$store.state.count--
      }
    }
  }
</script>

getters

vuexのstore()メソッド内には関数を記述することもできる

複雑な処理をvuexのデータで行いたい、それらを共通化して複数箇所で利用したい時などに便利

その際はgettersに定義する

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 2
    },
    getters: {
        doubleCount: state => state.count * 2
    }
});

mapGettersヘルパー

mapGettersをインポートして引数にvuexのgettersに定義してあるメソッド名配列で渡すことで省略して利用することができる

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(["doubleCount", "tripleCount"])
  },
  methods: {
    toUsers() {
      this.$router.push({
        name: "users-id-profile",
        params: { id: 1 }
      });
    }
  }
};
</script>

Mutation

vuexのstateに定義している値はどこからでも参照することができるのでバグを生みやすい