mapStateを理解する

概要

Vuexにはstate/getters/mutations/actionsそれぞれにhelper関数が備わっています。

今回はmapStateを使ってできる事を簡単にまとめていたいと思います。

基本的な使い方

まずは簡単なstateを定義します。

store.js

const counter = {
  namespaced: true,
  state: {
    count: 0
  }
};

const person = {
  namespaced: true,
  state: {
    name: "Taro",
    age: 20
  }
};

const store = new Vuex.Store({
  modules: {
    counter,
    person
  }
});

export default store;

mapStateの基本は、stateのkey名を配列にし関数に渡す事で、コンポーネントの算出プロパティに複数のステートを登録することができます。この場合、プロパティ名はkey名と同一となります。

index.js

import { mapState } from "vuex";

export default {
  computed: mapState(["counter", "person"]),
  mounted() {
    console.log(this.counter); // {count: 0}
    console.log(this.person); // {name: "Taro", age: 20}
  },
};

ストアモジュール内のkeyにアクセスしたい場合は、第一引数にモジュール名、第二引数にkey名を指定します。 key名と別名で算出プロパティに定義したい場合は、配列ではなくオブジェクトで定義します。

index.js

export default {
  computed: mapState("person", ["name"]),
  mounted() {
    console.log(this.name); // Taro
  },
};

index.js

export default {
  computed: mapState("person", {
    anotherName: "name"
  }),
  mounted() {
    console.log(this.anotherName); // Taro
  },
};

他の算出プロパティと併用する場合は、スプレッド演算子を使用し、オブジェクトを展開して使用します。

index.js

  computed: {
    ...mapState(["counter", "person"]),
    computedProperty() {
      return 'property'
    },
  },

stateを加工して算出プロパティに登録する

モジュール内のkey名にアクセスするパターンでオブジェクトを渡しましたが、そのオブジェクトには取得したいkey名の他、関数を渡す事ができます。その関数の引数にはstateが入り、値を加工して別の値として算出プロパティに登録する事ができます。

index.js

  computed: {
    ...mapState("person", {
      name: (state) => state.name,
      greeting: function (state) {
        return `こんにちは！ 僕は ${state.name} です！`;
      },
    }),
  },
  mounted() {
    console.log(this.name); // Taro
    console.log(this.greeting); // こんにちは！ 僕は Taro です！ 
  },

この機能を使う事により、gettersのような振る舞いを定義する事ができます。コンポーネント内特有のgettersなどを定義したい時は、このmapStateの機能を使うことで、gettersの肥大化を抑制する事ができます。

TOC

概要

基本的な使い方

stateを加工して算出プロパティに登録する