Vue.js 在哪里存储非组件数据属性？答案

【问题标题】：Vue.js where to store non-component data properties?Vue.js 在哪里存储非组件数据属性？
【发布时间】：2017-07-21 21:35:27
【问题描述】：

我正在使用 Vue.js 开发一个项目，并且我大部分时间都使用组件，但有时我只想添加一些 Vue.js 语法而不完全创建组件。

因为我不像你通常那样使用渲染，所以 Vue 附加到的整个 HTML 内容不会被覆盖，允许我在现有 HTML 上 sprinkle 一些 Vue.js 语法。

new Vue({
    el: '#vue',
    name: 'Vue root',
    data: {
      store
    },
    components: {
        Example
    }
});

将一些 Vue.js 语法添加到现有 HTML 的示例是：保持 2 个输入彼此同步，例如：

index.html 上的表格一

<input type="text" attributes... v-model="store.arrival">

index.html 上的表格二

<input type="text" attributes... v-model="store.arrival">

在介绍这家商店之前，我收到一条消息，内容大致如下：

[Vue 警告]：属性或方法“到达”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。（在根实例中找到）

这导致我介绍了这家商店，因为我不想让我的根组件的数据属性在那个文件中膨胀，而是保留这些floating in space(because they do not belong to a component) 属性的概述。

我喜欢仍然将 Vue 语法添加到现有 HTML 的能力，但这感觉像是不好的做法。

有没有比在商店里更好的方法来存储这些变量（它会很快变得拥挤）？还是我实际上应该将所有内容都移动到组件中？这也会导致问题，因为如果需要的话，我不得不将 PHP 变量之类的东西转换为 Javascript。

希望我的意思很清楚，感谢您的阅读，如果您需要更多信息，请告诉我。

干杯。

【问题讨论】：

我不太清楚你的期望，但我认为 mixins 会帮助你。你调查过吗？ vuejs.org/v2/guide/mixins.html
我真的不认为你可以在没有存储的情况下让某些东西运行良好。例如你发布的带有输入的示例，需要一些初始数据到特定 v-model 的 vue 实例中 - 所以你必须在 Vue 实例中导入存储数据，然后您可以将新属性附加到 v-model。 stackoverflow.com/questions/42326821/…

【解决方案1】：

从您的问题看来，您觉得使用 Vue 的 data 属性而不是组件，或者将 Vue 指令添加到存在于 Vue 元素内的 HTML 中，您做错了什么。

这没什么问题。 Vue 文档的 getting started 页面就是这样做的。这是开始将 Vue 与各种 Web 框架集成的便捷方式。我认为没有人认为这是一种不好的做法。如果有人这样做，那么，谁在乎呢？

【讨论】：