Usar datos del state de un modulo Vuex como atributo de un objeto definido en Data () para utilizar en un formulario <b-form-select>

vuex

#1

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