「これからはじめるVue.js実践入門」の感想・備忘録7

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

export default new Vuex.Store({
  // struct: true,
  state: {
    count: 0
  },
  mutations: {
    minus(state) {
      state.count--;
    },
    plus(state) {
      state.count++;
    }
  },
})

import store from './store'
〜省略〜
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    <h1>{{ count }}</h1>
    <button @click="plus">+</button>
    <button @click="minus">-</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    plus() {
      this.$store.commit('plus');
    },
    minus() {
      this.$store.commit('minus');
    }
  }
}
</script>

import { mapState } from 'vuex'
//として以下のようにステートのプロパティ名を指定するだけ。
computed: mapState(['count']),

//他の算出プロパティとまとめる場合はスプレッド演算子を使う。
computed: {
  hoge() {
    return this.name;
  },
  ...mapState(['count']),
}

computed: {
  count() {
    return this.$store.state.count;
  }
},
// 上記の記述を以下のように省略して記述できるようなる。
computed: mapState(['count']),

// ステートと違う名前の算出プロパティにしたい場合はオブジェクトにする。
computed: mapState( { countNum: 'count' } ),

// ストアで定義
getters: {
  tenTimes(state) {
    return state.count * 10;
  }
}

// コンポーネントでmapGettersを使って算出プロパティにマージする。
import { mapGetters } from 'vuex'
// 〜省略〜
computed: {
  ...mapGetters(['tenTimes']),
},

getters: {
  tenTimes(state) {
    return state.count * 10;
  },
  twentyTimes(state, getters) {
    return getters.tenTimes * 2;
  },
}

getters: {
  multiply(state) {
    return num => {
      return state.count * num;
    }
  },
}

computed: {
  ...mapGetters(['multiply']),
},
// は以下と同じ意味になる。
methods: {
  multiply(num) {
    return this.$store.getters.multiply(num);
  }
}
// よって、mapGettersを使うとcomputedではなくmethodsとなるためキャッシュされない。
// キャッシュさせたい場合は、mapGettersを使わずに算出プロパティとして定義する必要がある。
computed: {
  multiply() {
    return this.$store.getters.multiply(this.num);
  }
},

mutations: {
  plusX(state, payload) {
    state.count += payload.num;
  }
},

methods: {
  plusX() {
    this.$store.commit('plusX', {num: 2});
  },
},

methods: {
  plus() {
    this.$store.commit('plus');
  },
  minus() {
    this.$store.commit('minus');
  }
}
// は以下のように書くことができる。
import { mapMutations } from 'vuex'
// 〜省略〜
methods: {
  ...mapMutations(['plus', 'minus']),
}

<input type="text" v-model="originCount">
// 〜省略〜
computed: {
  originCount: {
    get() {
      return this.$store.state.count;
    },
    set(value) {
      return this.$store.commit('setCount', {count: value});
    }
  }
},

actions: {
  setCountAsync(context, payload) {
    setTimeout(() => {
      context.commit('setCount', payload);
    }, 2000);
  }
}

methods: {
  setCountAsync() {
    this.$store.dispatch('setCountAsync', {count: 10});
  },
},

import { mapActions } from 'vuex'
// 〜省略〜
methods: {
  ...mapActions(['plusAsync']),
},

export default new Vuex.Store({
  modules: {
    module1: Module1,
    module2: Module2
  }
})

export default{
  namespaced: true,
  state: {
    count: 0
  },
  mutations: {
    plus(state) {
      state.count++;
    }
  },
}

<template>
  <div>
  <p>{{ count1 }}</p>
  <p>{{ count2 }}</p>
  <button @click="plusForModule1">+</button>
  <button @click="plusForModule2">+</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  computed: {
    count1() {
      return this.$store.state.module1.count;
    },
    ...mapState({
      count2: state => state.module2.count
    })
  },
  methods: {
    plusForModule1() {
      this.$store.commit('module1/plus');
    },
    ...mapMutations({
      plusForModule2: 'module2/plus'
    })
  }
}
</script>