I have a store in which I placed an action with a single method and I am trying to access that method but it did not work, I checked the documentation and everything is correct.
I know it doesn’t work because the console.log() is never printed
This is my store
import { defineStore } from 'pinia';
export const useFormStore = defineStore('form', {
state: () => {
const fields = [ 'title', 'purpose', 'importance', 'obtain', 'provide', 'resume', 'request', 'complement', 'propose', 'agreements', 'tracing', 'lead', 'clarify', 'recognize', 'share'
];
const stateObject = {};
fields.forEach(field => {
stateObject[field] = '';
});
return {
...stateObject,
wasCompleted : false
}
},
actions:{
updatedStatus(){
console.log( 'hola mundo')
if (
Object.values(this.$state).every(value => value !== '')
) {
this.wasCompleted = true;
}
}
}
})
And this is my component
<template>
<div>
<FormContainer>
<template v-slot:title-section> Proceso de Interacción </template>
<template v-slot:main-section>
<div class="w-full my-4">
<label for="first_name" class="block mb-2 text-lg font-medium text-gray-900 font-semibold lg:text-2xl">Escriba el nombre del proceso:</label>
<input
type="text"
id="first_name"
class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-cdg-yellow focus:border-cdg-yellow block w-full p-2.5"
placeholder="Ejemplo: Importancia de la puntualidad"
v-model="inputTitle"
@input="updatedForm"
required
/>
</div>
</template>
<template v-slot:button-section>
<ButtonCdg
v-show="!wasCompleted"
@click="$emit('showSection', 'start-section')"
>
<template v-slot:content>
Regresar
</template>
</ButtonCdg>
<ButtonCdg
v-show="!wasCompleted"
:disabled="isDisabled"
:class="[ { 'opacity-50 hover:scale-100': isDisabled} ]"
@click="$emit('showSection', 'home-section')"
>
<template v-slot:content>
Siguiente
</template>
</ButtonCdg>
<ButtonCdg
v-show="wasCompleted"
>
<template v-slot:content>
Ir a resultados
</template>
</ButtonCdg>
</template>
</FormContainer>
</div>
</template>
<script type="module">
import FormContainer from '../FormContainer.vue';
import ButtonCdg from '../template/ButtonCdg.vue';
import { mapWritableState, mapActions } from 'pinia'
import { useFormStore } from '../../stores/form'
export default {
components:{
FormContainer,
ButtonCdg
},
data(){
return {
inputTitle : '',
}
},
computed : {
...mapWritableState( useFormStore, [ 'title', 'wasCompleted' ] ),
isDisabled(){
return !(this.inputTitle ?? false);
}
},
methods: {
...mapActions( useFormStore, [ 'updatedStatus' ] ),
updatedForm(){
this.updatedStatus()
console.log( this.wasCompleted )
}
},
}
</script>
Know what I’m doing wrong
