Vuex mapState mapGetters mapMutations mapActions 使用笔记

• store/index.js

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
// export default new Vuex.Store({
export const store = new Vuex.Store({
    state: {
        count: 6
    },
    getters: {
        doCount: (state, getters) => {
            return getters.doneTodos.length;
        },
        doneTodos: state => state.count + 2
    },
    mutations: {
        counts(state, v) {
            state.count = v;
        },
        addNum(state, v) {
            v ? state.count += v : state.count++
        },
        reduceNum(state) {
            state.count--
        }
    },
    actions: {
        actionNumAdd(v) {
            v.commit('addNum', 6);
        },
        actionNumReduce(v) {
            v.commit('reduceNum', 6);
        }
    }
})

• src/main.js

• Demo.vue

<template>
    <div id="app">
        <input v-model="counts" />
        <input v-model="getternum" />
        <button @click="addnum1(2)">mutitaion+1</button>
        <button @click="actionnum6">action+6</button>
    </div>
</template>

<script>
    import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
    export default{
        data(){
            return {}
        },
        computed:{
            ...mapState({
                counts:(state) => state.count
            }),
            ...mapGetters({
                getternum:'doneTodos'
            })
        },
        methods:{
            ...mapMutations({
                addnum1:'addNum' //相当于 this.addnum1 = this.$store.commit('addNum',addNum参数荷载)
            }),
            ...mapActions({
                actionnum6:'actionNumAdd' //相当于 this.actionnum6 = this.$store.dispatch('actionNumAdd',addNum参数荷载)
            })
        }
    }
</script>

• 显示结果
  

-over-