vuex mapGetters

Posted 2020-11-12 web前端开发技术

1、vuex 配置

//vuex的配置
//注意Store是大写
const store = new Vuex.Store({
    //数据保存
    state: {
        show: false,
        count: 0,
        list: [1, 5, 8, 10, 30, 50]
    },
    mutations: {
        increase(state, n = 1) {
            state.count += n;
        },
        decrease(state, n = 1) {
            state.count -= n;
        },
        switch_dialog (state) { // 这里的state对应着上面这个state
      state.show = state.show ? false : true
      // 你还可以在这里执行其他的操作改变state
      
    }

    },
    getters: {
        filteredList: state => {
            return state.list.filter(item => item < 31);
        }
    },
    actions:{
        asyncIncrease(context){
            context.commit(‘increase‘);
        },
        switch_dialog123 (context) { // 这里的context和我们使用的$store拥有相同的对象和方法
      context.commit(‘switch_dialog‘)
      // 你还可以在这里触发其他的mutations方法
      
    }
    }
});

2、mapGetters使用

<template>
    <div>
        {{count}}
        <button @click="handleIncrease">+5</button>
        <button @click="handleAsyncIncrease">-5</button> {{filteredList}}
        <button @click="handleRouter">跳转到 HelloWorld3</button>
        <button @click="showRouter">展示路由</button>
    </div>
</template>

<script>
    import { mapState } from ‘vuex‘
    import { mapGetters } from ‘vuex‘
    export default {
        name: ‘HelloWorld2‘,
        computed: {
            //            count(){
            //                return this.$store.state.count;
            //            },
            //            filteredList() {
            //                return this.$store.getters.filteredList;
            //            },
            ...mapState({
                count: state => state.count
            }),
            // 使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters([
                ‘filteredList‘
            ])
        },
        methods: {
            handleIncrease() {
                this.$store.commit(‘increase‘, 5);
            },
            handleDecrease() {
                this.$store.commit(‘decrease‘, 5);
            },
            handleAsyncIncrease() {
                this.$store.dispatch(‘asyncIncrease‘);
            },
            handleRouter() {
                this.$router.push(‘/HelloWorld3‘);
            },
            showRouter() {
                console.log(this.$router);
                console.log(this.$router.push);
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>