231 Adding Coaches to Vuex

步骤

1、CoachForm.vue中emit formData

<script>
export default {
    emits: ['save-data'],
    data() {
        return {
            firstName: '',
            lastName: '',
            description: '',
            rate: 0,
            areas: [],
        };
    },
    methods: {
        submitForm() {
            const formData = {
                firstName: this.firstName,
                lastName: this.lastName,
                description: this.description,
                rate: this.rate,
                areas: this.areas,
            };

            console.log(formData);
            
            this.$emit('save-data', formData);
        },
    }
}
</script>

2、stores/modules/coaches/下的mutations.js和actions.js实现提交的数据添加到集合中

action.js

export default {
    registerCoach(context, payload){
        const newCoach = {
            id: 'c5',
            firstName: payload.firstName,
            lastName: payload.lastName,
            description: payload.description,
            hourlyRate: payload.rate,
            areas: payload.areas,
        };
        context.commit('registerCoach', newCoach);
    }

};

mutations.js

export default {
    registerCoach(state, payload){
        state.coaches.push(payload);
    }

};

3、CoachRegisteration.vue中添加一个方法调用action.js中的方法

<template>
    <base-card>
        <section>
            <h2>Register as a coach now!</h2>
            <coach-form @save-data="saveData"></coach-form>
        </section>
    </base-card>
</template>

<script>
import CoachForm from '@/components/coaches/CoachForm.vue'

export default {
    components: {
        CoachForm,
    },
    methods: {
        saveData(data) {
            this.$store.dispatch('coaches/registerCoach', data);
            this.$router.replace('/coaches'); //jump to coaches page
        },
    },
};
</script>

4、实现已注册用户Register as Coach按钮显示灰色

stores/index.js中添加一个变量userId

import { createStore } from "vuex";
import coachesModule from "./modules/coaches/index.js"

const store = createStore({
    modules: {
        coaches: coachesModule,
    },
    state() {
        return {
            userId: 'c5',
        };
    },
    getters: {
        userId(state) {
            return state.userId;
        }
    },
});

export default store;

stores/modules/coaches/actions.js中使用userId

export default {
    registerCoach(context, payload){
        const newCoach = {
            id: context.rootGetters.userId,
            firstName: payload.firstName,
            lastName: payload.lastName,
            description: payload.description,
            hourlyRate: payload.rate,
            areas: payload.areas,
        };
        context.commit('registerCoach', newCoach);
    }
};

stores/modules/coaches/getters.js中添加isCoach

export default {
    coaches(state) {
        return state.coaches;
    },
    hasCoaches(state) {
        return state.coaches && state.coaches.length > 0;
    },
    isCoach(state, getters, rootState, rootGetters){
        const coaches = getters.coaches;
        const userId = rootGetters.userId;
        return coaches.some(coach => coach.id === userId);
    }
};

CoachesList.vue中添加isCoach()到computed中

isCoach() {
    return this.$store.getters['coaches/isCoach'];
},

最后用v-if控制Register as Coach按钮是否显示

<base-button v-if="!isCoach" :link="true" to="/register">Register as Coach</base-button>