What is the best way to create a constant, that can be accessible from entire application in VueJs ?

前端 未结 4 600
难免孤独
难免孤独 2021-01-17 16:43

I can create a constant through a store in my vuejs application, but i don\'t think it is a good practice.what is other way to do the same?

相关标签:
4条回答
  • 2021-01-17 17:05

    You can always define a variable outside of the Vue app scope and use it throughout the application.

    However, if you are using any bundler like Webpack/Browserify/etc. you can do the same but you'd have to import it into every component using it. An example for that can be found below.

    //const.js
    export default {
       c1: 'Constant 1',
       c2: 'Constant 2'
    }
    
    // component.vue
    import const from './const';
    
    export default {
      methods: {
        method() {
          return const.c1;
        }
      }
    }
    
    0 讨论(0)
  • 2021-01-17 17:09

    The most small big solution

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

    testing the code..

    //page.vue
    import {Test} from "./helper";
    
    <template>
      <div>
       {{testing.KEY2}}
      </div>
    </template>
    
    export default {
      data: function(){
       return {
        testing: Test
      }
     }
    }
    
    0 讨论(0)
  • 2021-01-17 17:17

    You can use the method

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

    or

    const State= Object.freeze({ Active: 1, Inactive: 2 });
    export default {
      data() {
        return {
          State_: State,
          state: State.Active
        };
      },
      methods: {
        method() {
          return state==State_.Active;
        }
      }
    }
    
    0 讨论(0)
  • 2021-01-17 17:30

    try this instead

    //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
      }
     }
    }
    
    0 讨论(0)
提交回复
热议问题