javascript - 在 Nuxt 中使用 ES6 类作为 vuex 存储状态

Question

当我在 nuxt 中的 vuex 存储上设置 ES6 类 时，我收到以下警告:

 WARN  Cannot stringify arbitrary non-POJOs EndPoint

当我使用对象作为状态时，它会在没有警告的情况下工作。

那么我如何在我的州使用ES6类。

我的模型:

export default class EndPoint {
    constructor(newEndPoints) {
        this.login = newEndPoints.login;
        this.status = newEndPoints.status;
    }
}

并在此处改变状态:

commit(CoreMutations.SET_ENDPOINTS, new EndPoint(response.data));

使用对象:

const EndPoint = {
    endPoints(newEndPoints) {
        return {
            login: newEndPoints.login,
            status: newEndPoints.status
        };
    }
};

并变异:

commit(CoreMutations.SET_ENDPOINTS, EndPoint.endPoints(response.data));

Answer 1

正如评论中的讨论，在类中添加toJSON方法解决了在客户端设置状态时的问题，但是当在服务器中设置状态时，状态将变为未定义。 因此添加此代码可以解决问题:

    toJSON() {
        return Object.getOwnPropertyNames(this).reduce((a, b) => {
            a[b] = this[b];
            return a;
        }, {});
    }