Problems accessing store actions in pinia and vue3

29 Views Asked by At

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

0

There are 0 best solutions below