vuex mapMutations 使用

你可以在元件中使用 

this.$store.commit('xxx')

 送出 mutation，或者使用 

mapMutations

 輔助函數将元件中的 methods 映射為 

store.commit

 調用（需要在根節點注入 

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: {
        asyncIncrease(context) {
            context.commit('increase');
        },
        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> {{filteredList}}
        <button @click="handleRouter">跳轉到 HelloWorld3</button>
        <button @click="showRouter">展示路由</button>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import { mapGetters } from 'vuex'
    import { mapMutations } 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);
            },
            handleAsyncIncrease() {
                this.$store.dispatch('asyncIncrease');
            },
            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')`
            })
        }
    };
</script>

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

</style>