234 Storing Requests (Messages) With Vuex

步骤

1、stores/modules/requests下面添加index.js/getters.js/mutations.js/actions.js

index.js

import actions from "./actions.js";
import mutations from "./mutations.js";
import getters from "./getters.js";

export default {
    namespaced: true,
    state() {
        return {
            requests: []
        }
    },
    getters,
    mutations,
    actions,
}

getters.js

export default {

}

mutations.js

export default {
    addRequest(state, payload) {
        state.requests.push(payload);
    },
}

actions.js

export default {
    contactCoach(context, payload) {
        const newRequest = {
            id: new Date().toISOString(),
            coachId: payload.coachId,
            userEmail: payload.email,
            message: payload.message,
        }
        context.commit('addRequest', newRequest);
    },
}

2、stores/index.js中添加requestsModule

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

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

export default store;

3、ContactCoach.vue submitForm中调用添加requests的方法

methods: {
        submitForm() {
            this.formIsValid = true;
            if (!this.email || !this.email.includes('@') || !this.message) {
                this.formIsValid = false;
            }else{
                this.formIsValid = true;
                // send the message here
                this.$store.dispatch('requests/contactCoach',{
                    coachId: this.$route.params.id,
                    email: this.email,
                    message: this.message
                });
                this.$router.replace('/coaches');
            }
        }
    }