在 Nuxt 中使用 ES6 类作为 vuex store state

Question

当我在 nuxt 的 vuex 商店中将ES6 class设置为 state 时，我收到以下警告：

 WARN  Cannot stringify arbitrary non-POJOs EndPoint

当我使用 object 作为 state 时，它会在没有警告的情况下工作。

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

我的model：

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

并在这里改变 state：

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

使用 object：

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

并变异：

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

Answer 1

如评论中的讨论，在 class 中添加toJSON方法解决了在客户端设置 state 时的问题，但是在服务器中设置 state 时，状态将变为undefined 。 所以添加这段代码解决了问题：

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