在 Vue 模板中存储对象答案

【问题标题】：Storing Objects in Vue Templates在 Vue 模板中存储对象
【发布时间】：2021-04-13 18:01:09
【问题描述】：

我从挂载事件中的一个类创建一个对象。我需要在整个组件中使用这个对象。

我一直在使用数据字段来存储对象（它不是 JSON 对象，它是一个完整的实例化类）。

存放此对象的最佳位置在哪里？所以我可以在整个组件中使用它？

【问题讨论】：

为什么你认为数据字段的位置不对？你还想把它存放在哪里？
我的印象是 data 属性是反应性的，所以我正在寻找另一个全局范围。或许它知道简单的 JSON 对象和函数类型对象的区别？

标签： vue.js vuejs2 vue-component

【解决方案1】：

基于your comment，听起来您正在寻找声明非反应性数据的方法，范围仅限于每个组件实例。

选项 1：使用附加属性

分配this.VARNAME = VALUE
通常在 created() 挂钩中完成，但可以在组件上下文中的任何位置
IDE 中的 IntelliSense 可能无法发现此属性（TypeScript 将需要类型断言/声明）

例子：

export default {
  created() {
    this.myNonReactiveProp = new MyClass()
  }
}

选项 2：使用带有 `Object.freeze()` 的数据属性

Object.freeze() 防止属性被响应，但也使其完全只读
可用于静态数据
IntelliSense 可以检测到此属性（就像它对所有 data() 属性所做的那样）

例子：

export default {
  data() {
    return {
      myNonReactiveProp: Object.freeze(new MyClass())
    }
  }
}

【讨论】：

【解决方案2】：

你可以通过插件在 vue 组件之间传递类：

https://vuejs.org/v2/guide/plugins.html

全局安装你的插件，你应该这样调用类，例如：

class myClass {
    // ...
}

Vue.prototype.$myClass = new myClass;

OR 仅在组件中：

<script>
class test {

}

export default {
    data: () => ({
        instance: new test
    }),
    mounted() {
        console.log(this.instance)
    }
}
</script>

【讨论】：

选项 1：使用附加属性

选项 2： 使用带有 Object.freeze() 的数据属性

选项 2：使用带有 `Object.freeze()` 的数据属性