20171109_vue_mixins用法

[openks]

看到过mixins但是一直没用过，后来发现他是这么用的

var mixin = {
  created: function () {
    console.log(1)
  },
  data(){
    return {
      name:"demoName"
    }
  }
  methods:{
    showName:function(){
      //minxs使用实例的数据
      console.log(this.showName+this.demoName);
    }
  }
}
var vm = new Vue({
  data(){
    showName:false
  },
  created: function () {
    console.log(2)
  },
  methods:{
    show:function(){
      //调用minxins的方法
      this.showName()
      console.log("使用mixins的数据"+this.demoName);
    }
  }
  mixins: [mixin]
})
// => 1
// => 2
// 当调用show方法的时候 会调用mixins里的showName方法，公用钩子函数和方法以及数据

[openks]

也可以绑定全局组件,然后所有组件都可使用

// src/utils/mixin.js
let mixin = {
    data () {
        return {
          // 本地上传图片地址(图片上传到服务端，地址应该是服务端地址，如果线上静态包和服务端不一致则需要配置线上地址)
          // 也可以在 config/prod.env.js多配置两个参数  
          // baseURL: process.env.NODE_ENV === 'development' ? process.env.DEV_PATH : process.env.PROD_PATH 
            baseURL: process.env.NODE_ENV === 'development' ? '本地调试服务器路径/配置过proxy的路径' : '线上服务器路径'
        }
    },
    methods: {
      // 常用localStorage 方法 
        setStorage (key, objValue) {
            window.localStorage.setItem(key, JSON.stringify(objValue))
        },
        getStorage (key) {
            return JSON.parse(window.localStorage.getItem(key))
        }
    }
}
export default mixin

// main.js
import mixin from '@/utils/mixin.js'
//启用全局mixin
Vue.mixin({
    ...mixin
})

[openks]

有几个页面都需要任务状态,该状态是一个对象数组。
根据需求每个用户获取的状态都是相同的，多处需要只取一处即可。
注意：
全局mixin的data在每个组件上都会有的，但是要改变这个值能改的只能是自己组件的值。在开发工具里不易查找(必须要找到该节点)其父组件和子组件均为默认值
总结：
最好的方法是使用vuex解决即 #71 (comment) 的方案

// src/utils/mixin.js
let mixin = {
    data () {
        return {
            mixinTaskStatus: [],
            mixinUploadUrl: process.env.NODE_ENV === 'development' ? 'aaa/fileUpload' : 'bbb/fileUpload'
        }
    },
    methods: {
        mixinFetchState () {
          let data={}
          ......
          // 判断本地存储(localStorage或sessionStorage)是否存在，
          // 如果存在则赋值
          // 如果不存在从服务端获取数据并赋值及存储在本地
            this.mixinTaskStatus = data
        }
}
export default mixin

// src/main.js
// 启用全局mixn
import Vue from 'vue'
import mixin from '@/utils/mixin.js'
// 启用全局mixin
Vue.mixin({
    ...mixin
})

具体使用：
比如我在batchSendTask页面需要使用该参数，就在该页面的mounted函数里调用该方法

mounted () {
    this.mixinFetchState()
}

在页面中就可以直接只用这个值了

<el-option :label="item.code"
           v-for="item in mixinTaskStatus"
           :key="item.id"
           :value="item.name"></el-option>

也可以使用Vuex解决该问题，详见 #71

[openks]

强烈不建议使用全局mixin
原因：

1. 影响到之后创建的所有实例对象（含第三方）
2. 每个组件上的data与方法都相互独立

官方解释

谨慎使用全局混合对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。也可以将其用作 Plugins 以避免产生重复应用

变通方法如下

1. 所有的全局data都应该交由vuex或者localStorage接管， 鉴于这些值全部都需要在页面直接使用,强烈建议放在vuex里处理
2. 所有不需要与服务端交互的全局方法都应该作为实例方法挂载在vue原型对象上(或者封装为插件使用)
3. 需要与服务端交互的全局方法应该放在action里进行处理