Use ES6 classes as vuex store state in Nuxt

Question

When I set ES6 class to state on my vuex store in nuxt I got following warn:

 WARN  Cannot stringify arbitrary non-POJOs EndPoint

and When I use object as state is works without warning.

So How can I use ES6 classes in my state.

My model:

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

and mutate state here:

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

Using object:

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

and mutate:

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

Just new value to my state. of course before asking I searched and I saw that, but I don't use vuex orm. — BeHappy, May 04 '20 at 23:26
That issue mentions the Nuxt fork of _devalue_ is the source of the warning. Have you tried adding a `toJSON` method to your class? — Phil, May 04 '20 at 23:29
When I add `toJSON` method without body, warning gone, but why? — BeHappy, May 04 '20 at 23:45
I suggest you read through that Github issue. There are direct links to the section of code in `nuxt/devalue` that trigger the warning — Phil, May 04 '20 at 23:53

score 3 · Accepted Answer · answered May 05 '20 at 01:12

As discussion in comment add toJSON method in class solve the problem when setting state in client, but when set state in server, states will become undefined. so adding this code solve the problem:

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

Use ES6 classes as vuex store state in Nuxt

1 Answers1