在 Vue 模板中存储对象

Question

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

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

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

Answer 1

你可以通过插件在vue组件之间传递class:

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

class myClass {
    // ...
}

Vue.prototype.$myClass = new myClass;

或仅在组件中：

<script>
class test {

}

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

Answer 2

根据，听起来您正在寻找方法来声明非反应性数据，范围限定到每个组件实例。

选项 1：使用附件属性

赋值this.VARNAME = VALUE
通常在 created() 挂钩中完成，但可以在组件上下文中的任何地方完成
IDE 中的 IntelliSense 可能无法发现此属性（TypeScript 需要类型 assertions/declarations）

示例：

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

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

Object.freeze() 防止属性反应，但也使其 完全只读
可用于静态数据
IntelliSense 可以检测到此属性（因为它检测所有 data() 属性）

示例：

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

在 Vue 模板中存储对象

Storing Objects in Vue Templates

vue.js

vue-component

vuejs2

选项 1：使用附件属性

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

在 Vue 模板中存储对象

Storing Objects in Vue Templates

vue.js

vue-component

vuejs2

选项 1：使用附件 属性

选项 2： 使用数据 属性 和 Object.freeze()

选项 1：使用附件属性

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