Avue的表格列表的列显示隐藏持久化存储

这里选择通过混入方式，也可以直接写在所需要的组件内部，也可以全局混入（但是不建议，怕对现有系统功能造成影响，需谨慎！！）

原理：所有混入对象的选项将被混入该组件本身的选项。

特性：发生冲突时以组件数据优先，即发生冲突会覆盖混入对象的选项。组件使用mixins中的属性或者方法，当改变mixins的属性值或者方法内部的一些逻辑操作时，只会在当前组件中起作用而并不会改变混入对象的属性值或者方法。

1.创建需要混入的对应文件 optionColumn.js

import { mapGetters } from 'vuex'
// Avue 表格列表的列显隐持久化
export const  optionColumnMixin={
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {
    //点击列显隐存储配置至本地缓存
    option: {
      handler(newVal) {
        console.log("混入 watch")
        // 根据自身需求设置唯一key，这里针对当前用户
        localStorage.setItem( this.userInfo.account + '_' + this.$route.path, JSON.stringify(newVal.column))
      },
      deep: true
    },
  },
  created() {
    console.log("混入 created")
    let option = localStorage.getItem(this.userInfo.account + "_" + this.$route.path);
    if (option != null && option != "" && option != undefined) {
      this.option.column = JSON.parse(option);
    }
  },
};

2.在需要调用的组件页面中引入optionColumn.js文件

import {optionColumnMixin} from "@/mixins/optionColumn";
export default {
  mixins: [optionColumnMixin]
  data() {
    return {};
  }
}