Vue3中无法调用Pinia Store Action方法，请求排查问题

核心问题 #

组件使用Pinia的mapActions和mapWritableState时，未正确初始化Store实例，直接传入useFormStore定义函数而非调用后得到的实例，导致Action无法绑定到正确的Store上下文，调用后无任何输出。同时输入值未同步到Store字段，导致表单校验逻辑永远不触发状态变更。

错误点及修复方案 #

1. 未初始化Store实例 #

Pinia的map系列辅助函数需要接收已实例化的Store对象，而非定义Store的函数。原代码直接传入useFormStore函数，导致Action与Store上下文脱离。

2. 输入值未同步到Store #

组件使用独立的inputTitle变量做v-model，未将输入值同步到Store的title字段，导致updatedStatus中的全量校验永远不成立（Store内title始终为空）。

修改后的组件代码 #

<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="title" <!-- 直接绑定Store的title字段 -->
                        @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'

    // 初始化Store实例
    const formStore = useFormStore()

    export default {
        components:{
            FormContainer,
            ButtonCdg
        },
        computed : {
            // 传入已实例化的formStore
            ...mapWritableState(formStore, [ 'title', 'wasCompleted' ] ),
            isDisabled(){
                return !(this.title ?? false); // 直接判断Store中的title
            }
        },
        methods: {
            // 传入已实例化的formStore
            ...mapActions(formStore, [ 'updatedStatus' ] ),
            updatedForm(){
                this.updatedStatus()
                console.log( this.wasCompleted )
            }
            
        },
    }
</script>

额外说明 #

• 修复后调用updatedStatus时，控制台会输出hola mundo，当所有Store字段都不为空时，wasCompleted会变为true。
• 如果需要保留本地inputTitle变量，需在updatedForm中手动同步：this.title = this.inputTitle，再调用this.updatedStatus()。

内容的提问来源于stack exchange，提问作者yair_00