全局方法的注册与局部方法

局部方法

  说明:此方法存在于plugins/ajax/home/index.js中
        在ajax/index.js中export * from './home'
  import axios from '../axios'
  import { defaultErrorHandler } from '../axios'
  export function getInfo(id,successHandler,errorHandler=defaultErrorHandler) {
    axios('/api').then(res=>successHandler(res.data)).catch(e=>errorHandler(e))
}

注册全局方法

   说明: 此方法存在于ajax/index.js中
         在main.js中import ajax from '@plugins/ajax' 并使用Vue.use(ajax)
   import {defaultErrorHandler} from './axios'
   export function getJson(id,successHandler,errorHandler=defaultErrorHandler) {
    axios.get('/api').then(res=>successHandler(res.data))
             .catch(e=>errorHandler(e))
}
  // 将getJson注册为全局方法
  export default {
    install(Vue) {
        Vue.prototype.$getJson = getJson
    }
}
Posted in: Vue

vue keep-alive / vue数据层次太深的view驱动

  说明: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。  
        keep-alive 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中
    
  说明: 当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
   //  keep-alive 进入组件时   将仓库的周期设置给当前组件的period 
    activated: function () {   
      this.period = this.$store.state.sheetTableModule.periodType
  }

  // keep-alive 离开组件时
   deake ectivated: function () {
       console.log(1111)
   }
   说明: vue针对数据和对象的监控是一个避不开的问题
         特别时数据层次太深,更改数据view不发生改变的情况时常出现
         例如:
   //数据list   假设是一个computed数据
    let list = [  
       {
        setStyle:false,   //用于控制class
       value:[
        {value:10000,formatter:"int"}, 
        {value:12000,formatter:"int"},   
        ]
      },
      {
        setStyle:false,
       value:[
        {value:11000,formatter:"int"}, 
        {value:12000,formatter:"int"},   
        ]
      }
    ]
   // 如果将list遍历到table中。给tr绑定事件@click="show(item)"

   // 改变item中的setStyle来控制样式的显示
   // 此时改变list很难驱动view的变化

   /*
   * 针对这种情况 建议改变生成list的数据愿
   * 在事件触发的时候  也更改数据源
   */
   this.$set(this.origin[n],'setStyle',!this.origin[n].setStyle)   // 使用$set方法   this.origin是生成list的愿数据
Posted in: Vue


ˆ Back To Top