vuex mapActions

在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）.

import Vue from 'vue';
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App';
import router from './router';
import Vuex from 'vuex';

Vue.config.productionTip = false;
Vue.use(Vuex);
Vue.use(Element)

//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: {
        asyncDecrease({commit }) {
            commit('decrease',5);
        },
        switch_dialog123(context) { // 这里的context和我们使用的$store拥有相同的对象和方法
            context.commit('switch_dialog')
            // 你还可以在这里触发其他的mutations方法
        }
    }
});

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    //使用vuex
    store: store,
    render: h => h(App),
});

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

<script>
    import { mapState } from 'vuex'
    import { mapGetters } from 'vuex'
    import { mapMutations } from 'vuex'
    import { mapActions } 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);
                this.increase();
            },
            handleDecrease() {
                this.$store.commit('decrease', 5);
            },
            handleAsyncDecrease() {
                //调用方式一
                //                this.$store.dispatch('asyncDecrease');
                //调用方式二
                this.asyncDecrease()
            },
            handleRouter() {
                this.$router.push('/HelloWorld3');
            },
            showRouter() {
                console.log(this.$router);
                console.log(this.$router.push);
            },
            //mapMutations 使用方法一
            //            ...mapMutations([
            //                'increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
            //            ]),
            //mapMutations 使用方法二
            ...mapMutations({
                increase: 'increase' // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
            }),
            //mapActions 使用方法一
            //            ...mapActions([
            //                'asyncDecrease' // 将 `this.asyncDecrease()` 映射为 `this.$store.dispatch('asyncDecrease')`
            //            ]),
            //mapActions 使用方法二
            ...mapActions({
                asyncDecrease: 'asyncDecrease' // 将 `this.asyncDecrease()` 映射为 `this.$store.dispatch('asyncDecrease')`
            }),
        }
    };
</script>

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

</style>