如何在Vue中将逻辑分离为单独的组件？

Question

如何将逻辑分为一个单独的组件。

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
     }
 }
}

这是我的代码，我想将此检查（property.DEV_MODE）是否放在另一个组件上，并且仅放在这个组件中，以便提取到服务器。因此，可能必须首先将组件导入此组件中，检查此条件，如果为true，则将其提取到服务器。有什么办法做到这一点？对于不在此组件中的可分离逻辑，更好的解决方案是什么？

Answer 1

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

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