VUE引用自定义js文件

第一次将vue实用在项目中，遇到的问题不老少；在一个小项目中最初将数据加载的代码直接写在了初始化的界面中，后来的需求修改使得数据加载的程序越来越庞大（其实也就是比最初的多了一点点），不仅看起来不美观，而且在多处调用时也十分不方便。
于是，就像把数据加载的代码独立出来放到JS文件中来使用，可直接新建JS文件并把代码扔进去似乎是不行。。。
网上各种找，最终结局了眼前的问题。

编写自定义JS文件

JS文件中定义export default，并在install中通过定义Vue.prototype.xxx设置自己的方法。

loaddata.js文件代码片段：

    export default {
      install(Vue) {
        Vue.prototype.loadRptDate = function() {
          let that = this
          this.$http.get("itf/tc/query_date/")
            .then(function(res) {
              store.commit('setRptYear', res.data.ryear);
              store.commit('setRptWeek', res.data.rweek);
              store.commit('setRptDate', res.data.rdate);
              that.loadData();
            })
            .catch(function(err){
              console.log(err)
            });
        }
        Vue.prototype.loadData = function() {
          ... ...
          Load Something ...
          ... ...
        }
      }
    }

引用JS文件

在 main.js 中引入 loaddata.js import loadData from './loaddata.js' 并使用 Vue.use(loadData) ，这样之后，就可以在整个项目中就都可以通过 this 来使用自定义的函数了。

引用代码片段：

    import loadData from './loaddata.js'
    Vue.use(loadData)

使用JS文件中的函数

调用代码片段：

    export default {
      name : 'App',
      store,
      components: {
        
      },
      methods : {
        load() {
          if (store.state.isQueryDate) {
            this.loadData();
          } else {
            this.loadRptDate();
          }
        },
        ... ...
      },
      data() {
        return {
          message: 'message',
          ... ...
        }
      },
      mounted(){
        this.load();
      }
    }