Oct 22, 2018
0
Level 8
dispatch action with formData to proccess into the store?
Hi everyone, I'm making an admin panel for my web, for state management I'm using this library:
https://francescosaveriozuppichini.github.io/Flue/index.html
It's similar to vuex but with much less bolierplate andoverhead, it also lets me use javascript classes to keep everything object oriented and also reactive!
Now one of my inputs is for uploading a file via axios but I was wondering how could I pass formData object directly to the store, I want to separate my component from business logic.
This is my component:
//STATE///////////////////////////////////////////////////////////////////////////
constructor() {
super()
this.state.post = '',
this.state.posts = [],
this.state.inputPost = ''
}
//STORE EXPONE HIS ACTIONS////////////////////////////////////////////////////////
actions(ctx) {
return {
createPost() {ctx.dispatchAction('CREATE_POST', { post: post } )},
readAllPosts() {ctx.dispatchAction('READ_ALL_POSTS', { posts: posts })},
updatePost() {ctx.dispatchAction('UPDATE_POST', { post: post } )},
deletePost() {ctx.dispatchAction('DELETE_POST', { post: post } )},
togglePostVisibility() {ctx.dispatchAction('TOGGLE_POST_VISIBILITY', { post: post })}
}
}
//STORE ACTIONS REDUCER////////////////////////////////////////////////////////////
reduce(action) {
this.reduceMap(action, {
CREATE_POST: this.createPost,
READ_ALL_POSTS: this.readAllPosts,
UPDATE_POST: this.updatePost,
DELETE_POST: this.deletePost,
TOGGLE_POST_VISIBILITY: this.togglePostVisibility
})
}
//ACTION FUNCTIONS//////////////////////////////////////////////////////////////////
createPost(post) {
console.log('saving_post');
let formData = new FormData();
formData.append('category', post.category);
formData.append('title', post.title);
formData.append('post', post.body);
formData.append('isVisible', post.isVisible);
formData.append('image', post.isVisible);
axios.post('/posts', formData)
.then(response => (this.post = response.data.post))
.catch(error => console.log(error));
}
And my component:
<template>
<form id="new_posts_form" class="modal_container">
<i class="modal_close fa fa-times-circle" title="Cerrar" @click="$store.actions.closeModal()"></i>
<h2 class="modal_title">Nueva publicación</h2>
<div class="horizontal_gradient_line" style="align-self:center; margin:10px 0px;"></div>
<div class="modal_inputs_container">
<div class="modal_row_container">
<span class="modal_label">Visible</span>
<input class="modal_body_check" type="checkbox" v-model="isVisible" title="La publicación será visible automáticamente en la web">
</div>
<div class="modal_row_container">
<span class="modal_label">Imagen</span>
<input type="file" name="file" required>
</div>
<div class="modal_row_container">
<span class="modal_label">Categoría</span>
<select class="modal_input_select" v-model="category" required>
<option :value="'${postcategory.id'">{{ postcategory.name }}</option>
</select>
</div>
<input class="modal_input_text" type="text" v-model="title" placeholder="Titulo de la publicación" required>
<textarea class="modal_input_textarea summernote" v-model="body" placeholder="Contenido de la publicación" required></textarea>
<div class="form_valid_container"></div>
<div class="form_error_container"></div>
</div>
<div class="horizontal_gradient_line" style="align-self:center; margin:10px 0px;"></div>
<div class="modal_buttons_container">
<button class="modal_button boot_blue form_store_button" type="button" @click="$store.actions.createPost()" title="Guardar la nueva publicación">Guardar</button>
<button class="modal_button boot_grey form_reset_button" type="button" @click="$store.actions.resetInputs()" title="Resetear los campos">Reset</button>
</div>
</form>
</template>
<!--SCRIPTS-->
<script>
export default {
name: 'CreatePostModal',
mounted() {
console.log("'${this.$options.name} component succesfully mounted'");
},
computed: {
message: { get() { return $store.state.title }, set(value) { $store.actions.setTitle(value) } },
}
}
</script>
<!--STYLES-->
<style scoped>
</style>
Please or to participate in this conversation.