vuex4之mapGetter的简单使用

vuex的getter就相当于vue的计算属性，点击

代码

<script>
import { mapGetters, mapState } from 'vuex'

import store from '../store'

export default {
    methods:{
        addPerson(){
            // store.commit("increment") // 可以引入store进行commit
            this.$store.commit("increment") // 因为挂载到了全局，我们可以通过this进行方法
        }
    },
    // 传递数组直接取出属性
    computed:{
        ...mapState(["personNum","fingerPer","footerPer"]),
        ...mapGetters(["totalFinger","fingerAndFooter"])
    }
    // 传递对象可以重命名
}
</script>

<template>
    <p>人数:{{personNum}},每个人有{{fingerPer}}根手指和{{footerPer}}脚趾</p>
    <p>一共有{{totalFinger}}手指</p>
    <p>一共有{{fingerAndFooter}}手指和脚趾</p>
    <button @click="addPerson">增加人数</button>
</template>

效果

当我们点击增加人数的时候，我们会发现所有的属性都跟着动了