创建常量的最佳方法是什么,可以从VueJs中的整个应用程序访问?

时间:2017-10-23 06:11:13

标签: vue.js vuex

我可以通过我的vuejs应用程序中的商店创建一个常量,但我认为这不是一个好习惯。还有其他方法可以做同样的事情吗?

4 个答案:

答案 0 :(得分:12)

您始终可以在Vue应用范围之外定义变量,并在整个应用程序中使用它。

但是,如果您使用任何捆绑包,如Webpack / Browserify / etc.您也可以这样做,但您必须将其导入到使用它的每个组件中。一个例子可以在下面找到。

//const.js
export default {
   c1: 'Constant 1',
   c2: 'Constant 2'
}

// component.vue
import const from './const';

export default {
  methods: {
    method() {
      return const.c1;
    }
  }
}

答案 1 :(得分:3)

您可以使用方法

const State= Object.freeze({ Active: 1, Inactive: 2 });
export default {
  data() {
    return {
      State,
      state: State.Active
    };
  },
  methods: {
    method() {
      return state==State.Active;
    }
  }
}

const State= Object.freeze({ Active: 1, Inactive: 2 });
export default {
  data() {
    return {
      State_: State,
      state: State.Active
    };
  },
  methods: {
    method() {
      return state==State_.Active;
    }
  }
}

答案 2 :(得分:0)

改为尝试

//conts.js
const test = "texte";

export default test
//component.vue
import test from "./conts";

<template>
  <div>
   {{example}}
  </div>
</template>

export default {
  data: function(){
   return {
    example: test
  }
 }
}

答案 3 :(得分:0)

最小的大解决方案

//helper.js
    
export const Test = {
  KEY1: 1,
  KEY2: 2,
  KEY3: 3,
  KEY4: 4
}

测试代码。

//page.vue
import {Test} from "./helper";

<template>
  <div>
   {{testing.KEY2}}
  </div>
</template>

export default {
  data: function(){
   return {
    testing: Test
  }
 }
}