nuxt.js / vuexでのmapStateについて

Question

Nuxt.jsでstore/counter.jsを作り、vuexモジュールモードの勉強をしています。

store/counter.js

export const state = () =>({
    count: 0,
    name: "test"
})

export const mutations = {
    add(state){
        state.count +=1
    },
    hiku(state){
        state.count -=1
    }
}

pages/users/index.vue

export default {
    computed:{
        count(){
            return this.$store.state.counter.count
        },
        name(){
            return this.$store.state.counter.name
        }
    },
    methods:{
        addCount(){
            this.$store.commit("counter/add")
        },
        hikuCount(){
            this.$store.commit("counter/hiku")
        }
    }
}

これで問題なく表示はできたのですが、さらに簡潔にかけるmapState、mapMutationsというヘルパーを知ったのですが、

computed: mapState({
 count: state => state.counter.count,
 name: state => state.counter.name
}),
methods:{
 addCount(){
  this.$store.commit("counter/add")
 },
 hikuCount(){
  this.$store.commit("counter/hiku")
 }
}

いまいち便利というか簡潔という感じがしないのですが、もっと効率良い書き方などあるのでしょうか？また、あえてmapStateを使用する利点など教えていただけると助かります。

Answer 1

自分もよくわからなかった経緯があるので、もし参考になれば

Vuex: mapStateの使い方を理解する

Comments

[okpk]

ありがとうございます。参考にさせていただきます。

Answer 2

こう書けます

...mapState(['count', 'name'])

...mapMutations(['add', 'hiku']),

別名をつけたいなら

...mapMutations({
  addFunction: 'add',
  hikuFunction: 'hiku',
}),

これでthis.addFunction()でstoreのaddが呼び出せます。

公式見るのが一番早いです
https://vuex.vuejs.org/ja/guide/state.html#mapstate-%E3%83%98%E3%83%AB%E3%83%91%E3%83%BC