My Pinia Getters Lost Reactivity and can't figure out how to fix it.
it happens When state.Ciudad is updated by the user in the form, the getters valorPedido and valorDomicilio and valorDomicilio don't get updated.
// The form
<FormKit
type="form"
:actions="false"
@submit="formData.pagar()"
#default="{ state: { valid } }"
>
<!-- Ciudad de entrega -->
<FormKit
type="select"
label="Ciudad de entrega"
name="Ciudad"
v-model="formData.Ciudad"
outer-class=""
required
:options="formData.ciudades"
/>
<p >Tu envio tiene un valor de {{'$'+(formData.valorDomicilio).toString()}} </p>
<!-- direccion de entrega-->
<FormKit type="submit" :disabled="!valid"
label="Pagar"
>
Ir a Pagar {{formData.valorPedidoConEnvioLetras}}
</FormKit>
</FormKit>
<FormKit
type="form"
:actions="false"
@submit="formData.pagar()"
#default="{ state: { valid } }"
>
<!-- Ciudad de entrega -->
<FormKit
type="select"
label="Ciudad de entrega"
name="Ciudad"
v-model="formData.Ciudad"
outer-class=""
required
:options="formData.ciudades"
/>
<p >Tu envio tiene un valor de {{'$'+(formData.valorDomicilio).toString()}} </p>
<!-- direccion de entrega-->
<FormKit type="submit" :disabled="!valid"
label="Pagar"
>
Ir a Pagar {{formData.valorPedidoConEnvioLetras}}
</FormKit>
</FormKit>
1 Reply
// The store
export const useFormDataStore = defineStore({
id:'formData',
state:() =>(
{
Ciudad:
{
value: {
Ciudad:'Bogotá',
Departamento:'DC',
Valor:9000,
Id:'1'},
label:'Bogotá - DC'
},
ciudades:[
{
value: {
Ciudad:'Bogotá',
Departamento:'DC',
Valor:9000,
Id:'1'},
label:'Bogotá - DC'
},
{ value:{Ciudad:'Medellín',
Departamento:'Antioquia',
Valor:9000,
Id:'12'},
label: 'Medellín - ANTIOQUIA'
},
...]}),
persist:{
key: 'mixverde1',paths: ['Ciudad']
},
getters:{
valorPedido: state => {
return ( state.mixVerde6 * 17000)
}
valorDomicilio: state => {
if (state.valorPedido <70000 ){
return state.Ciudad.value.Valor
} else return 0
},
valorPedidoConEnvio: state => {
return state.valorPedido + state.valorDomicilio
},})
export const useFormDataStore = defineStore({
id:'formData',
state:() =>(
{
Ciudad:
{
value: {
Ciudad:'Bogotá',
Departamento:'DC',
Valor:9000,
Id:'1'},
label:'Bogotá - DC'
},
ciudades:[
{
value: {
Ciudad:'Bogotá',
Departamento:'DC',
Valor:9000,
Id:'1'},
label:'Bogotá - DC'
},
{ value:{Ciudad:'Medellín',
Departamento:'Antioquia',
Valor:9000,
Id:'12'},
label: 'Medellín - ANTIOQUIA'
},
...]}),
persist:{
key: 'mixverde1',paths: ['Ciudad']
},
getters:{
valorPedido: state => {
return ( state.mixVerde6 * 17000)
}
valorDomicilio: state => {
if (state.valorPedido <70000 ){
return state.Ciudad.value.Valor
} else return 0
},
valorPedidoConEnvio: state => {
return state.valorPedido + state.valorDomicilio
},})