问使用Vue 3中的Axios观察、比较和发布更新后的表单数据到API

EN

import { defineStore } from 'pinia'
import Axios from 'axios';
import axios from 'axios';

const BASE_API_URL = adfy_wp_locolizer.api_url;

export const useOptionsStore = defineStore({

    id: 'Options',

    state: () => ({
        allData: {},
        options: {
            enable_quick_view: null, // boolean
            quick_view_btn_label: "", // string
            quick_view_btn_position: "", // string
        },
        newOptions: {}, // If required, holds the new options to be saved.
        message: "", // Holds the message to be displayed to the user.
        isLoading: true,
        isSaving: false,
        needSave: false,
        errors: [],
    }),
    getters: {

        // ⚡️ Return state of the options.
        loading: (state) => {

            return state.isLoading;
        },
    },
    actions: {

        // ⚡️ Use Axios to get options from api.
        fetchOptions() {

            Axios.get(BASE_API_URL + 'get_options')
                .then(res => {
                    this.alldata = res.data.settings;
                    let settings = res.data.settings_values;

                    /*
                    * Set options state.
                    */
                    this.options.enable_quick_view = JSON.parse(
                        settings.enable_quick_view
                    );
                    this.options.quick_view_btn_label =
                        settings.quick_view_btn_label;

                    this.options.quick_view_btn_position = settings.quick_view_btn_position;

                    /*
                    * End!
                    */

                    this.isLoading = false;
                })
                .catch(err => {

                    this.errors = err;
                    console.log(err);
                })
                .finally(() => {

                    // Do nothing for now.
                });
        },

        // ⚡️ Update options using Axios.
        updateOptions() {

            this.isSaving = true;

            axios.post(BASE_API_URL + 'update_options', payload)
                .then(res => {

                    this.needSave = false;
                    this.isSaving = false;
                    this.message = "Options saved successfully!";
                })
                .catch(err => {

                    this.errors = err;
                    console.log(err);
                    this.message = "Error saving options!";
                })
        }
    },
});

<script setup>
    import { onMounted, watch } from "vue";
    import { storeToRefs } from "pinia";
    import { Check, Close } from "@element-plus/icons-vue";
    import Loading from "../Loading.vue";
    import { useOptionsStore } from "../../stores/options";
    let store = useOptionsStore();
    let { needSave, loading, options, newOptions } = storeToRefs(store);

    watch(
        options,
        (state) => {
            console.log(state);
            // Assign the option to the newOptions.
        },
        { deep: true, immediate: false }
    );

    onMounted(() => {
        store.fetchOptions();
    });
</script>
<template>
    <Loading v-if="loading" />
    <form
        v-else
        id="ui-settings-form"
        class="ui-form"
        @submit="store.updateOptions()"
    >
        <h3 class="option-box-title">General</h3>
        <div class="ui-options">
            <div class="ui-option-columns option-box">
                <div class="ui-col left">
                    <div class="label">
                        <p class="option-label">Enable quick view</p>
                        <p class="option-description">
                            Once enabled, it will be visible in product catalog.
                        </p>
                    </div>
                </div>
                <div class="ui-col right">
                    <div class="input">
                        <el-switch
                            v-model="options.enable_quick_view"
                            size="large"
                            inline-prompt
                            :active-icon="Check"
                            :inactive-icon="Close"
                        />
                    </div>
                </div>
            </div>
        </div>
        <!-- // ui-options -->
        <div class="ui-options">
            <div class="ui-option-columns option-box">
                <div class="ui-col left">
                    <div class="label">
                        <p class="option-label">Button label</p>
                    </div>
                </div>
                <div class="ui-col right">
                    <div class="input">
                        <el-input
                            v-model="options.quick_view_btn_label"
                            size="large"
                            placeholder="Quick view"
                        />
                    </div>
                </div>
            </div>
        </div>
        <!-- // ui-options -->
        <button type="submit" class="ui-button" :disabled="needSave == true">
            Save
        </button>
    </form>
</template>
<style lang="css" scoped>
    .el-checkbox {
        --el-checkbox-font-weight: normal;
    }
    .el-select-dropdown__item.selected {
        font-weight: normal;
    }
</style>