计算属性其他文件

【问题标题】：Computed property other file计算属性其他文件
【发布时间】：2018-05-12 08:47:13
【问题描述】：

使用 Vue.js。如果计算属性基于外部文件变量，它会正常工作吗？比如：

import vars from "./vars.js
return default {
    computed: {
        booleano : function() {
            if (vars.variab == 0){
                return true
            }
            return false
        }
    }
}

vars.js

var variab = 0

change = function(){
    variab = 1
}

return default {variab}

如果调用change，修改了vars.js文件中的vars.var，是否也会影响booleano？

如果不是，做这个例子的正确方法是什么？

【问题讨论】：

标签： vue.js computed-properties

【解决方案1】：

您需要将变量由 Vue 转换为反应变量。您可以通过将该对象用作 Vue 实例的 data 初始化程序来做到这一点。

const vars = {
  variab: 0
};

new Vue({
  el: '#app',
  data() {
    return {
      vars
    };
  },
  computed: {
    booleano() {
      if (this.vars.variab == 0) {
        return true;
      }
      return false;
    }
  }
});

setTimeout(() => {
  vars.variab = 1;
}, 1000);

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-if="booleano">Yes</div>
  <div v-else>No</div>
</div>

【讨论】：