保存 Vue.js 项目进度的最佳方法答案

【问题标题】：Best way to save progress in Vue.js project保存 Vue.js 项目进度的最佳方法
【发布时间】：2022-01-05 09:22:32
【问题描述】：

我目前正在处理别人在 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)

所以一切都被添加到一个对象中。

在最后一个练习中有这样的代码：

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')
            })

并将所有练习的所有答案发送到另一个创建 excel 文件的 php 文件。

在每次练习之间处理状态保存的最佳方式是什么。

【问题讨论】：

标签： javascript php vue.js

【解决方案1】：

您可以使用 localstorage 来存储表单。

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

这里有一个例子：

How to update object in local storage in vue js?

您必须对对象进行字符串化和解析以分别存储和检索它。

【讨论】：