Nuxt 2 (vuejs) ストアからモードをアクティブ化する

Question

vuex ストアからモーダル コンポーネントをアクティブ化する必要があります。結果 API が成功したら、「this.$refs['modalSuccess'].show()」を使用してコンポーネント内のモーダルを表示します。

ただし、関数「sendLeadResponse」をメソッド（コンポーネント）からオペレーション（ストレージ）に変更する必要があります。その後、この 'this.$refs['modalSuccess'].show()' を使用してモーダルをアクティブ化できなくなります。

ストアから電話をかける方法はありますか？

これがプロセスです:

1. ボタン: コンポーネント内のメソッドをアクティブ化します;
2. メソッド: ストアからアクションをアクティブ化します;
3. 操作: 外部 API を使用します;
4. モーダル: 結果が正常であれば、コンポーネント内のモーダルがアクティブになります;

ボタンとモーダルを含むコンポーネント

<テンプレート>
    <セクション>
    <div class="w-100 d-md-flex justify-content-md-end">
        <小さいボタン
            smallButtonText="お客様の質問 →"
            @event="createLeadObject()"
            id="show-btn"
        />
    </div>
        <b-モーダル
            ref="modalSuccess"
            OKのみ
        > Obrigado pelo interesse! Em breve entraremos em contato.
        </b-modal>
    </div>
    </セクション>
</テンプレート>

<スクリプト>
SmallButton を '../SmallButton.vue' からインポートします
デフォルトのエクスポート {
    名前: 'BeClientForm'、
    コンポーネント: {
        小さなボタン
    }、
    メソッド: {
        createLeadObject(){
            const dataLeadObject = {
                日付: new Date()、
                フルネーム: this.lead.name、
                電子メール: this.lead.email、
                電話: this.lead.phone、
                コメント: this.lead.comment
            }
            this.$store.dispatch('sendLeadResponse', dataLeadObject)
        }、
    }
}
</script>

店舗運営

アクション: {
        async sendLeadResponse({commit}, dataLeadObject){
            const jsonDataObject = JSON.stringify(dataLeadObject)
            
           await fetch("http://localhost:5000/api/lead/leadResponse", {
                メソッド: "POST"、
                ヘッダー: {"Content-type": "application/json"}、
                本体: jsonDataObject
            })
            .then((resp) => resp.json())
            .then((データ) => {
                if (データ.エラー) {
                    commit('MESSAGE_RESPONSE', data.error)
                }
                それ以外 {
                    commit('RESET_LEAD_RESPONSE')
                    !!!!!!!!!!!! this.$refs['modalSuccess'].show() !!!!!!!!!!!!!!! [動作しません)
                }
            })
        }、
    }

Answer 1

Vuex ストアは状態のみを考慮するように設計されています。コンポーネントや this.$refs に直接アクセスすることはできません。できることは、取得した結果に基づいてストアに状態を設定し、コンポーネントがその状態にアクセスできるようにするか、アクションから Promise を返して結果をコンポーネントに直接渡すことです。 リーリー リーリー