如何在 Vue 中将逻辑分离到一个单独的组件中？答案

【问题标题】：How can I separate the logic into a separate component in Vue?如何在 Vue 中将逻辑分离到一个单独的组件中？
【发布时间】：2018-09-12 13:05:15
【问题描述】：

如何将逻辑分离到一个单独的组件中。

Testing.vue

data: function () {
   return {
     projects: []
   }
},
methods: {
 refreshProjects () {
   if (property.DEV_MODE) {
     console.log(this)
     let vm = this
     fetch('/api/Test/').then((response) => response.json()).then(json => {
            vm.projects = json
     }).catch(function () {
            vm.dataError = true
     })
   } else {
       this.projects = testJsonFile
     }
 }
}

这是我的代码，我想将此检查 if (property.DEV_MODE) 放在另一个组件上，并且只在这个组件中进行获取到服务器。为此可能必须首先在该组件中导入组件，检查该条件是否为真以使获取到服务器。有没有办法做到这一点？对于不在此组件中的可分离逻辑，还有什么更好的解决方案？

【问题讨论】：

听起来你想要一个全局存储，比如 Vuex 或事件总线，其中 .您可以存储属性，然后从任何地方检查其 DEV_MODE 状态。

标签： vue.js components

【解决方案1】：

仅供参考，vue 将在客户端运行（除非 SSR），因此在 vue 前端检查开发模式并不是最好的。

根据基于组件的设计范例，建议组件处理与其相关的所有内容，包括与其相关的逻辑。组件必须像黑盒子一样工作。

【讨论】：