在 Vue.js 項目中保存進度的最佳方法

Question

我目前正在搞亂別人在 Vue.js 上的項目。 該項目是 php 中的一個網頁，要求用戶提供他的信息。 然后是用 vue.js 構建的一系列練習，最后將結果存儲在 excel 文件中。

我已經了解項目的布局及其工作原理，但在嘗試添加新功能時遇到了問題。 我希望能夠保存練習中的當前進度，以便有人可以繼續他上次打開頁面時的練習。 每個練習最后都有這個代碼：

handleSubmit(e) {
        e.preventDefault()

        for (let i = 0; i < e.target.length - 1; i++) {
            if (e.target[i].tagName === 'INPUT') {
                const result = {
                    id: e.target[i].id,
                    value: e.target[i].value,
                    exNumber: this.exNumber,
                }

                this.answers.push(result)
            }
        }

        this.addNewAnswer(this.answers)

因此所有內容都添加到 object 中。

在最后一個練習中有這樣的代碼：

const dataToPost = {
            name: this.name,
            age: this.age,
            birthday: this.birthday,
            city: this.city,
            gender: this.gender,
            loginDate: this.loginDate,
            exTimes: this.exTimes,
            totalTime: finalTime.toString(),
            class: classNumber,
            answers: this.finalScores,
        }

        this.axios
            .post(
                'http://***********/setAnswers.php',
                JSON.stringify(dataToPost)
            )
            .then((response) => {
                alert(response.data)
                router.push('/main')
            })

並將所有練習的所有答案發送到另一個 php 文件，該文件創建 excel 文件。

在每次練習之間保存 state 的最佳方法是什么。

提前感謝您的建議。

Answer 1

您可以使用 localstorage 來存儲表單。

https://fr.vuejs.org/v2/cookbook/client-side-storage.html

這里有一個例子：

如何在 vue js 的本地存儲中更新 object？

您必須對 object 進行字符串化和解析以分別存儲和檢索它。