基于VueJS采用Symbol原始数据类型统一维护项目提示文案管理实践

在项目中，无论项目的规模是大是小，总会存在一些需要提示给用户的提示性文字信息，一般在开发过程中采用具体的提示文字在具体的业务代码文件中，这样以来，一方面这些文字便分布在不同的文件中，对于日后的维护带来了一定的难度，倘若同一个提示文字出现多次，日后需要修改的时候变需要找到所有的地方一个个修改。对此，采用ES6新原始数据类型Symbol实践提示文字统一管理，如下：

一、好处

1）利用变量保存某一个文案信息，方便数据复用、维护

2）采用统一管理，方便维护

3）采用Symbol保障数据不重复

4）模块化归类管理信息

二、代码

//xxx.js  定义文字信息

 

export const IMPORT_ENTITY_SHORT = Symbol('import-entity-short')

export default {
    [IMPORT_ENTITY_SHORT]: '请至少选择一条数据'
}

 

//在入口文件main.js中全局注入统一信息管理入口

import Vue from 'vue'
import App from './App.vue'
import errorInfo from './xxx.js';

Vue.prototype.$errorInfo = errorInfo;
Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

//使用文字信息

import { IMPORT_ENTITY_SHORT } from 'xxx.js';

export default {
  data() {
    return {
      multipleSelection: []
    };
  },
  methods: {
    mutipleImport() {
      if (this.multipleSelection.length == 0) {
        this.showMsg(this.$errorInfo[IMPORT_ENTITY_SHORT]);
        return false;
      }
    },
};