在 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 进行字符串化和解析以分别存储和检索它。