Vue中存入Vuex的类实例原型方法丢失问题求助

这是个很典型的类实例在状态管理中丢失原型方法的问题，我来帮你拆解原因和对应的解决办法：

核心原因 #

1. JSON序列化会丢弃原型链信息 #

如果你的Vuex store开启了状态持久化（比如用了vuex-persistedstate这类插件），或者在状态同步、DevTools展示的过程中，Vuex会把state转成JSON格式来处理。而JSON.stringify()只能序列化对象的自有可枚举属性，原型链上的方法（比如你定义的analyzeBrand）根本不会被包含进去。等从JSON恢复状态时，得到的只是个普通对象，不再是Product的实例，自然就找不到原型方法了。

2. 状态操作中的对象转换（次要原因） #

就算没用到持久化，Vue的响应式系统在处理state里的对象时，或者你后续对state里的对象做深拷贝、用扩展运算符/Object.assign处理时，都会把实例转成普通对象，原型链信息也就跟着丢失了。

解决办法 #

方法一：用普通对象+工厂函数替代直接存实例（推荐） #

Vuex的state最好只存可序列化的纯数据，别直接存类实例。存入前先把实例转成普通对象，需要用方法的时候再重新实例化：

// 存入Vuex前转换为普通对象
const productData = { ...product1 };
commit('addProduct', productData);

// 在组件中需要调用方法时，重新创建实例
const productInstance = new Product(this.$store.state.products[0]);
productInstance.analyzeBrand(); // 正常调用方法

方法二：手动恢复原型链 #

如果必须保留实例结构，在从state取出对象后，手动把它的原型指向Product.prototype：

// 组件中获取对象后恢复原型
const product = this.$store.state.products[0];
Object.setPrototypeOf(product, Product.prototype);
product.analyzeBrand(); // 方法可以正常使用了

不过这种方式要注意：如果对象经过了JSON序列化，虽然自有属性还在，但必须每次取出都做原型恢复，比较繁琐，不推荐大规模使用。

方法三：把原型方法抽成独立工具函数 #

如果analyzeBrand的逻辑只依赖对象的属性（比如brand），完全可以把它从类里抽出来做成工具函数，这样就不用依赖类实例了：

// 单独的工具函数
function analyzeBrand(product) {
  // 原方法的逻辑，比如处理product.brand
  console.log(`正在分析品牌：${product.brand}`);
}

// 组件中直接调用
analyzeBrand(this.$store.state.products[0]);

这种方式最贴合Vuex的设计思路，状态只存数据，逻辑和数据分离，维护起来也更方便。

内容的提问来源于stack exchange，提问作者Modermo