Vuex 状态中的 Javascript 类中缺少方法答案

【问题标题】：Methods missing from Javascript Class inside Vuex stateVuex 状态中的 Javascript 类中缺少方法
【发布时间】：2020-11-13 23:00:51
【问题描述】：

我正在使用 Nuxt 框架和 Vuex 来在我的网站中存储数据，但是当我想直接在状态中使用一个类时遇到了麻烦。

模型cart.js 定义如下：

export class Cart {

    constructor(ownedID) {
        this._created = new Date();
        this._lastUpdated = new Date();
        this._ownerID = ownedID || 'visitor'
        this._items = []
    }

     getItem (articleNumber) {
          console.log(this._items)
    }

    ...
}

还有我商店的模块cart.js

import { Cart } from "~/models/cart";

const state = () => ({
    cart: new Cart()
})

const mutations = {
    ADD_ITEM(state, newItem) {
        console.log(state.cart)
    }
}

...

当调用ADD_ITEM(state, newItem) 突变时，缺少getItem(articleNumber) 函数，因此我收到TypeError: state.cart.getItem is not a function 错误。

这是console.log的结果：

__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }

   _created: 
   _item:
   _lastUpdated:
   _ownerID:

这是我设置的沙盒链接。

Nuxt vuex sandbox error

有人知道我的问题吗？

谢谢。

【问题讨论】：

我已按要求更改了带有沙盒链接的帖子。问题仍然存在。我只是使用 dispatch 来触发一个触发我的突变的动作。
根据这篇文章，您不能将类实例放入 vuex 商店 stackoverflow.com/questions/62006376/…
您的代码在 Vue/Vuex 中运行良好，但在 Nuxt 中运行良好。由于某种原因，Nuxt 从状态对象中剥离了原型继承信息，这意味着它无法找到该类创建的原型方法。（在没有 Nuxt 的 Vue/Vuex 中，没有 TypeError 和 getItem 有效。）
@ggirodda 根据该链接You can absolutely store class instances in the store state. ?

标签： javascript oop nuxt.js vuex

【解决方案1】：

Vue 只接受普通对象，只观察普通对象属性，它忽略 prototype 属性。根据Vue documentation

对象必须是普通对象：浏览器 API 对象和原型属性等原生对象将被忽略

在您的情况下，您使用class 在原型(__proto__) 中的普通对象和方法中创建变量，这就是状态无法找到getItem 方法的原因。您需要使用plain objects 而不是类

【讨论】：

在 Vue/Vuex 中可以正常工作，只是在 Nuxt 中不行，所以这个解释不太对。
@Dan 是的，你是对的，它也适用于 met，但它在 Vue Documentation 中提到。我认为这也是错误的。不是吗？
文档链接讨论的是反应性，而不是存在/可访问性。这仅意味着原型属性不会是反应性的，这大部分是正确的。他们没有提到的是原型属性至少是可访问的，并且可以在模板中使用，就像原型方法getItem一样。在 Nuxt 中，它们甚至无法访问且不存在，因为 Nuxt 似乎取消了其状态对象原型的链接，移除了所有原型继承。