1.0.1 • Published 4 years ago

fast-vue-const v1.0.1

Weekly downloads
2
License
ISC
Repository
github
Last release
4 years ago

Vue 自定义常量注册 computed 计算属性插件

前言:我们在使用 Vue 进行项目开发时难免会遇到需要定义常量的时候,那如果把常量定义在 data 中则会把常量也纳入了 Vue 的响应式数据管理中并且也不好和其它变量进行区分了,但如果不是这样的话又不能在我们的模板中直接使用常量这个值。

p-f-const 自定义插件:

  • 自动将我们定义好的常量数据转换为我们的 computed 计算属性。

注意 1. 常量的 key 必须是大写 2. 常量定义后的值不能在程序中再次修改

使用:

main.js 导入 p-f-const.js 插件

import Vue from 'vue'
import App from './App.vue'
import vueConst from 'fast-vue-const'

Vue.use(vueConst)
Vue.config.productionTip = false
new Vue({
  render: h => h(App)
}).$mount('#app');
Vue组件内部使用

APP.vue

<template>
  <div id="app">
	{{NAME_OF_CONSTANT[0].name}}&nbsp;{{OTHER}}
  </div>
</template>
<script>
export default {
  // 常量对象
  const: {
    NAME_OF_CONSTANT: [{ name: '123' }, { age: 16 }],
    OTHER: 'value2'
  },
  data () {
    return {
        // 常量不在 data 属性中定义
    }
  },
  mounted () {
    // 常量不能修改因为常量数据已经被插件冻结
    setTimeout(() => {
      // this.NAME_OF_CONSTANT[0].name = 'abc'
      // console.info(this.NAME_OF_CONSTANT);
      // this.OTHER = 'aaaaaaaaa'
    }, 3000);
  }
}
</script>
<style></style>