W250913/10_vuecli/helloworld/src/views/PageFour.vue

<template>
    <div>
        <h1>我是页面四</h1>
        <!-- 从 vuex 中获取 count 值 -->
         <!-- $store 是 vuex 实例 -->
          <!-- $store.state.定义的属性名 -->
           
        <h1>{{ x }},{{ y }},{{ z }},{{ count }}</h1>
        <h1>当前count值:{{ $store.state.count }}</h1>
        <h1>当前count值(简化):{{ countNum }}</h1>
        <!-- <h1>getter中的值:{{ $store.getters.getCount }}</h1> -->
         <h1>getter中的值(简化):{{ getCount }}</h1>
        <div>
            <button @click="changeCount">修改count</button>
            <button @click="asyncChangeCount">异步修改count</button>
        </div>
    </div>
</template>
<script>
    // mapState 这里边式全部的vuex 中的属性
    // mapMutations 这里边式全部的vuex 中的mutation方法
    // mapGetters 这里边式全部的vuex 中的getter属性
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
    export default{
        name:"PageFour",
        methods:{
            // 利用 mapMutations 方法 简化对 vuex 中 mutation 方法的调用
            // mapMutations 内部传递一个数组 数组中写入要引用的 vuex 中的 mutation 方法名
            ...mapMutations(["countAdd"]),
            ...mapActions(["actionFun"]),
            changeCount(){
                // 通过 commit 方法 调用 mutations 中的方法
                // 第一个参数 就是 mutations 中的方法名
                // 从第二个参数开始 就是 传递给 mutations 中的方法的参数
                // this.$store.commit("countAdd",10);
                this.countAdd(5);
            },
            asyncChangeCount(){
                // 调用 vuex 中的 action 方法 通过 dispatch 方法调用
                // this.$store.dispatch("actionFun",50);
                this.actionFun(50);
            }
        },
        created(){
            // 在js中引用vuex 中的值 前面需要添加this
            console.log(this.$store.state.count);
        },
        computed:{
            // 利用 mapState 方法 简化对 vuex 中值的引用
            // mapState 内部传递一个数组 数组中写入要引用的 vuex 中的属性名
            ...mapState(["count","x","y","z"]),
            // 利用 mapGetters 方法 简化对 vuex 中 getter 属性的调用
            // mapGetters 内部传递一个数组 数组中写入要引用的 vuex 中的 getter 属性名
            ...mapGetters(["getCount"]),
            countNum(){
                // 可以利用计算属性 简化对 vuex 中值的引用
                return this.$store.state.count;
            }
        }
    }
</script>