Vuexから呼び出すヘルパー(map〇〇)

とりあえずVuexにデータを保存することはできた。でも、どうやって呼び出してくるの〜ドラえも〜んVuexから関数を呼び出してくる道具が欲しいよ〜〜。

しょうがないな~のび太君、はい、Google検索をあげるよ。どうやらmapState,mapGetters,mapMutations,mapActionsを使えば呼び出せるみたいだね。

てことでmapを接頭語にしたヘルパー達を学んでいきます。

呼び出しヘルパーって何

vuexにあるstate,getters,mutations,actionsを呼び出すために使う接頭語がmapになっているヘルパー。

ちなみにVuexって何

状態管理をしてくれるライブラリ。

vueで中〜大規模アプリを作成していると複数のコンポーネントが作成されるため、$emitやpropsの書き方がわからなくなってしまうことがあるらしい。

そのように親子関係が複雑になると、自分が今どの階層にいるのか分からなくなり、メソッドの受け渡しに困ってしまう。

そこで、vuexのstateに状態を保存しておくことで、どのvueファイルからでもmapをつけて呼び出すことができる。

基本構成


const state = {
};

const getters = {
};

const mutations = {
};

const actions = {

};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};

state: 保存したいメソッドを書く。

getters: stateにアクセスするためのメソッドを書く。

mutations: gettersのメソッドを変更させるメソッドを書く。

actions: mutationsを実行させるための変更を書く。

actions⇨mutations⇨getters⇨stateの順番で値が変更されていく。

例えばユーザー登録のメソッドを書こうとしたら下記のようになる。


const state = {
  checkUser: null,
};

const getters = {
  checkUser: (state) => state.checkUser,
};

const mutations = {
  setCheckUser(state, user) {
    state.checkUser = user;
  },
};

const actions = {
  async containerUser({ commit }, user) {
    try {
      const userReflection = await axios.post('users', { user: user });
    
      commit('setCheckUser', userReflection.data);
      
      return userReflection.data;
     
    } catch (err) {
      console.log(err);
      return nil;
    }
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};

`map○○`を使うメリット

以下のようにシンプルに呼び出せること。

this.$store.state.state1 //通常
this.state1 //mapState使用

this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用

this.$store.commit('mutation1', 引数) //通常
this.mutation1(引数) //mapMutations使用

this.$store.dispatch('action1', 引数) //通常
this.action1(引数) //mapActions使用

例えば、さっき書いた基本構成のactionsからcontainerUser()を呼び出してきたいときは下記のように書く。

methods: {
    ...mapActions('users', ['containerUser']),
    ...mapActions('snackbar', ['fetchSnackbarData']),
    containerFunction() {
      this.containerUser(this.user).then((user) => {
		#本来ならthis.$store.dispatch('containerUser',this.user)と書かないといけない。
        if (user) {
          this.$router.push({ name: 'PreliquoTop' });
        } else {
          this.fetchSnackbarData({
            msg: '新規登録に失敗しました',
            color: 'error',
            isShow: true,
          });
        }
      });

methodsとcomputedの違い

computed

算出プロパティである。

算出プロパティはリアクティブな依存関係にもとづきキャッシュされるという違いがあります。算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。これはつまり、message が変わらない限りは、reversedMessage に何度アクセスしても、関数を再び実行することなく以前計算された結果を即時に返すことを指します。

(https://jp.vuejs.org/v2/guide/computed.html)

mapStateとmapGettersはcomputedに書き込む。

つまり、状態を呼び出すメソッドはcomputedに書き込む。