• 运用Vue mixins，您能够轻松地在编程中遵照DRY准绳，这能够确保您不会重复相同代码。

• 运用Vue mixins，您还能够取得灵敏的选择，mixin对象包含Vue组件的选项，因而混合了mixin和组件选项。

• Vue mixins也是安全的，假如写得好，它们不会影响超出其定义范围的变化。

• 它们是代码可重用性的绝佳平台。

先定义mixins

export default {
  data() {
    
    return {
      // 设置属性
      mixinViewModuleOptions: {
        createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？
        activatedIsNeed: false, // 此页面是否在激活（进入）时，调用查询数据列表接口？
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: false, // 删除接口，是否需要批量？
        deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
        exportURL: '' // 导出接口，API地址
      },
      // 默认属性
      searchText: '',
      dataForm: {}, // 查询条件
      dataList: [], // 数据列表
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0,
        'show-total': () => `共 ${this.pagination.total} 条`
      },
      dataListLoading: false, // 数据列表，loading状态
      dataListSelections: [], // 数据列表，多选项
      addOrUpdateVisible: false // 新增／更新，弹窗visible状态
    }
   
  },
  created() {
    if (this.mixinViewModuleOptions.createdIsNeed) {
      this.query()
    }
  },
  activated() {
    if (this.mixinViewModuleOptions.activatedIsNeed) {
      this.query()
    }
  },
  methods: {
    // 获取数据列表
    query() {
      
    },
    onQuerySuccess() { },
    
    },
    AddData() {
      this.$refs.edit.$open()
    },
    // 处理编辑
    EditData(record) {
      
    },
    DeleteData(id) {
      
    }
  }
}

在需要使用的地方

export default {
  mixins: [tableList],
  components: {
    AddEdit
  },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "查询接口地址",
        deleteURL:"删除接口地址"
      }
    }
  },
  methods: {
   
  }

通过以上操作步骤，即可实现vue mixins功能，可以简化你在多个页面 重复书写增删改查等繁琐的代码。