Hola!
Soy nuevo en Vue y Vuex.
Tengo dos modulos en vuex.
Modulos
- products
- tipProds
con sus respectivos datos en State.
Utilizo un componente llamado ProductoCreate para definir la data () del objeto product.
ProductoCreate.vue
<template>
<div>
<prod-form :product="product" @process-product="addProduct"></prod-form>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import ProdForm from '@/components/Producto/ProdForm'
export default {
components: {
ProdForm
},
data () {
return {
product: {
nombre: '',
descripcion: '',
precio: '',
done: false,
tipoProducto: null
},
}
},
methods: {
...mapActions ({
createProduct: 'products/addProduct'
}),
addProduct (product) {
this.createProduct(product).then(() => {
this.$router.push('/Nuevoproducto')
})
}
}
}
ProductCreate importa el componente ProdForm que se encarga de obtener los datos del formulario ingresados por el usuario.
ProdForm
<template>
<div>
<b-container>
<b-card class="text-center" style="color: red">
{{ title }}
</b-card>
<b-form @submit.prevent="$emit('process-product', product)" @reset="onReset">
<b-form-group id="product"
label="Producto"
label-for="product">
<b-form-input id="nombre"
type="text"
v-model="product.nombre"
required
placeholder="Ej: Lomito Especial">
</b-form-input>
</b-form-group>
<b-form-group id="descripcion"
label="Descripción:"
label-for="descriProd">
<b-form-input id="descripcion"
type="text"
v-model="product.descripcion"
required
placeholder="Lomito Especial con huevo, jamón, lechuga, tomate, etc">
</b-form-input>
</b-form-group>
<b-form-group id="tipoProducto"
label="Tipo Producto:"
label-for="tipoProducto">
<b-form-select v-model="product.tipoProducto" required class="mb-3" >
<option :value="null" > Seleccione una opción </option>
<option value="1">Lomitos</option>
<option value="2" >Hamburgesas</option>
<option value="3">Sandwich de Miga</option>
<option value="4" >Empanadas</option>
<option value="5">Choripanes</option>
<option value="6" >Pizzas</option>
</b-form-select>
<b-form-select v-model="product.tipoProducto" required class="mb-3" >
<option :value="value" v-for="value in product.tipoProducto" :key="value.id" >{{value.name }}</option>
</b-form-select>
</b-form-group>
<b-form-group id="precio"
label="Precio:"
label-for="precioProd">
<b-form-input id="precio"
type="number"
v-model="product.precio"
required
placeholder="$ 40">
</b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">{{ productSubmit }}</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</b-container>
</div>
</template>
<script>
export default {
props: {
product: {
type: Object,
required: true
},
productSubmit: {
type: String,
default: 'Crear'
},
title: {
type: String,
default: 'Crear nuevo producto'
}
},
onReset (evt) {
evt.preventDefault();
/* Reset our form values */
this.product.nombre = '';
this.product.descripcion = '';
this.product.precio = [];
this.product.tipoProducto = null;
/* Trick to reset/clear native browser form validation state */
}
}
</script>
<!-- b-form-1.vue -->
Lo que necesito es obtener los datos que ya fueron creados y que estan en el estado del State de TipProds.nombre y mostrarlo como options en el select del formulario.
Al principio lo definí de forma predeterminada como se lee en el código, asignando el nombre y el valor, pero ese selector tiene que traer los datos de tipProds.
Intente en obtener los datos desde ProdForm a través de mapGetters, pero solamente me los traía cuando me lo cacheaba al ingresar a los tipos de productos a través de Vue-Router.
getters.js
export function tipProds (state) {
return state.tipProds
}
computed: {
...mapGetters({
tipProd: 'tipProds/tipProds'
})
}
Luego intente desde ProductCreate obtener los datos de tipProds con mapGetters y mapState a traves de computed y setearlos en el atributo tipoProducto del objeto products definido en el data.
Ayuda. Saludos