Tengo una página que muestra los detalles de un usuario y necesito mostrar las facturas que pertenecen a ese usuario.
<template> <div> <div> // Child component one ..... </div> <div> // Child component two ..... </div> <div> // Invoice component one ..... <invoice-list :vendor-id="vendorData.id"/> </div> </div> </template>Tengo un archivo JS que llama a la API para obtener los datos, importados en la plantilla de factura. Estoy tratando de obtener el ID de proveedor en ese archivo JS para que pueda pasarse como un parámetro.
Mi plantilla de factura se parece a:
<template> <div class="wrapper"> <!-- Table Container grid --> --------- --------- --------- </div> </template> <script> import { onUnmounted } from '@vue/composition-api' import store from '@/store' import useInvoicesList from './useInvoiceList' import invoiceStoreModule from '../invoiceStoreModule' export default { props: { vendorId: { type: String, required: false, }, }, setup(props) { const { fetchInvoices, refetchData, } = useInvoicesList() return { fetchInvoices, refetchData, } }, } </script>Mi useInvoiceList.js se ve así:
import { ref, watch, computed } from '@vue/composition-api' import store from '@/store' export default function useInvoicesList() { const refInvoiceListTable = ref(null) const fetchInvoices = (ctx, callback) => { store .dispatch('app-invoice/fetchInvoices', { q: searchQuery.value, **/*This is where I need the vendor ID*/** }) .then(response => { }) .catch(() => { }) } return { fetchInvoices, refInvoiceListTable, refetchData, } }¿Cómo obtendría la identificación del proveedor en el método fetchInvoices?
Una forma es establecer el valor de la variable en la tienda y usarlo directamente en su archivo js, ya que ya está importando la tienda en ella. De otra manera, puede pasar parámetros a fetchInvoices (props.vendorId).