vue的mixins

最新推荐文章于 2023-05-30 15:08:48 发布

我是代码

最新推荐文章于 2023-05-30 15:08:48 发布

阅读量708

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44883077/article/details/120434339

版权

本文探讨了Mixins和Vuex在前端开发中的应用与区别。Vuex用于管理全局状态，而Mixins提供组件间的代码复用。通过实例，展示了如何使用Mixins实现通用的查询列表方法，减少了重复代码，提高了开发效率。在多个模块需要相同功能时，Mixins的使用简化了代码并保持了组件间的独立性。

摘要由CSDN通过智能技术生成

mixins的使用

mixins与vuex的区别

vuex：可以保存多个组件间共用的变量，当其中一个组件去改变vuex中的某个变量时，所有组件中，引用此变量的值也会跟着发生变化
mixins：也可以用来定义共用的变量，在各个组件中引入，每个组件中的变量是相对独立的，在当前组件中修改变量的值不会影响其他组件中值的变化

mixins使开发更简单

可以定义一个公共的mixins.js文件(用了jeecg-boot这个开源框架，才知道有mixins这个东西 -_- )，将各个组件间通用的变量、方法保存起来，使用时引用即可，又减少了不少代码量
里面可以有 data(){}, methods:{}, comuted: {}…，总之vue文件里面有的js代码，mixins里都可以有，但是如果引用了mixins，又同时自己的vue文件里有变量或者方法，vue文件里的变量或方法优先级更高

使用案例

在地方这里插入图片描述
有三大模块(采购环节、存货环节、销售环节)，每个模块下又有四个小模块，每个模块都需要查询列表(get请求)，需要做相同的操作12次。这时可以在mixins.js文件下声明通用的方法来调用查询列表接口，代码如下：

loadData(arg) {
      if(!this.url.list){
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records||res.result;
          if(res.result.total)
          {
            this.ipagination.total = +res.result.total;
          }else{
            this.ipagination.total = 0;
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

只需要在各个页面添加变量url，指定接口地址即可

url: {
          list: "/indebt.data/dtPurContract/list",
          edit: '/indebt.data/dtPurContract/edit',
          delete: "/indebt.data/dtPurContract/delete",
     }

类似的，还有添加、修改、删除、如果类似，都可以在mixins.js文件里声明通用的方法，在各个页面添加相同的方法名即可