Javascript VueJS-有没有办法强制重新加载mixin？

我有一个分页mixin，它将列表名和每页的元素数作为参数，并返回在该列表上进行分页所需的所有方法和数据

我在vue组件中使用它，根据视口的宽度，我在每页使用2或4个元素

因此，我的组件在创建windowWidth时会检查它，并相应地加载mixin。我的问题是，它在大多数情况下工作正常，但当用户调整窗口大小时，它不会更新每页的元素数，因为它不会重新加载mixin，这会导致移动/计算机布局中断

这是我的密码：

<script>
import { paginationMixin } from "../../assets/mixins";

const mixin4 = paginationMixin("images", 4);
const mixin2 = paginationMixin("images", 2);
let loadMixin = window.innerWidth < 550 ? mixin2 : mixin4;

export default {
  props: ["images"],
  data() {
    return {
      windowWidth: window.innerWidth,
      activeImage: 0,
      tempActiveImage: null
    };
  },
  mixins: [loadMixin],
  mounted() {
    window.addEventListener("resize", () => {
      this.windowWidth = window.innerWidth;
    });
  },
  computed: {
    imageShow() {
      if (this.tempActiveImage !== null) {
        return this.tempActiveImage;
      } else {
        return this.activeImage;
      }
    },
    elementPerPage() {
      return this.windowWidth < 550 ? 2 : 4;
    }
  }
};
</script>

从“./../assets/mixin”导入{paginationMixin}”；
const mixin4=分页mixin（“图像”，4）；
constmixin2=分页mixin（“图像”，2）；
让loadMixin=window.innerWidth<550？mixin2:mixin4；
导出默认值{
道具：[“图像”]，
数据（）{
返回{
windowWidth:window.innerWidth，
activeImage:0，
tempActiveImage:空
};
},
mixin:[loadMixin]，
安装的（）{
window.addEventListener（“调整大小”，（）=>{
this.windowWidth=window.innerWidth；
});
},
计算：{
imageShow（）{
if（this.tempActiveImage！==null）{
返回此.tempActiveImage；
}否则{
返回此.activeImage；
}
},
elementPerPage（）{
返回此值。窗宽<550？2:4；
}
}
};

基本上，我想在resize事件侦听器中添加一些行，这样，如果我通过windowWidth阈值，它也会更改我使用的mixin。 我尝试使用：

if (
        (this.windowWidth >= 550 && window.innerWidth < 550) ||
        (this.windowWidth < 550 && window.innerWidth >= 550)
      ) {
        console.log("mobile changed");
        loadMixin = window.innerWidth < 550 ? mixin2 : mixin4;
        this.$forceUpdate();
      }

if(
（this.windowWidth>=550&&window.innerWidth<550）||
（this.windowWidth<550&&window.innerWidth>=550）
) {
控制台日志（“移动更改”）；
loadMixin=window.innerWidth<550？mixin2:mixin4；
这是.$forceUpdate（）；
}

但它不起作用

---

非常感谢你的回答

>我想把这个逻辑移到<代码> MIXIN < /代码>。因此，像这样加载

mixin

：

<script>
import coolMixins from "../../assets/mixins";

export default {
  props: ["images"],
  data() {
    return {
      activeImage: 0,
      tempActiveImage: null
    };
  },
  mixins: [coolMixins],
  computed: {
    imageShow() {
      if (this.tempActiveImage !== null) {
        return this.tempActiveImage;
      } else {
        return this.activeImage;
      }
    }
  }
};
</script>

从“../../assets/mixin”导入CoolMixin；
导出默认值{
道具：[“图像”]，
数据（）{
返回{
activeImage:0，
tempActiveImage:空
};
},
混合：[冷却混合]，
计算：{
imageShow（）{
if（this.tempActiveImage！==null）{
返回此.tempActiveImage；
}否则{
返回此.activeImage；
}
}
}
};

然后在mixin内部执行调整大小逻辑：

mounted() {
   window.addEventListener('resize', this.onResize);
},
methods: {
  onResize(event) {
    const itemsToShow = window.innerWidth < 550 ? 2 : 4;
    this.paginationMixin("images", itemsToShow);
  }
}

mounted（）{
window.addEventListener（'resize'，this.onResize）；
},
方法：{
onResize（事件）{
const itemsToShow=window.innerWidth<550？2:4；
paginationMixin（“图像”，itemsToShow）；
}
}

---

这样做的另一个好处是，您不会在mixin的每个使用者中获得重复的代码，如果您需要使项目的数量显示为动态的，则使用者可以将该信息传递给mixin。

我不确定我是否了解您。那么CoolMixin就是我真正的mixin？和paginationMixin方法来更改我的mixin中的值？另外，我不需要在使用这个mixin的其他组件中使用这个逻辑。取决于窗口大小的页面上的元素实际上特定于此组件。你的方法仍然有效吗？是的-

coolMixin

（显然是重命名它）将是你想要包含的整个mixin

paginationMixin

是您试图在mixin内部调用的任何函数，它将

项设置为show

。如果你只在一个组件中需要这个逻辑，那么我会问为什么这个逻辑存在于mixin中，如果是这样的话，只要把只在组件中使用的逻辑移到组件内部，而不是mixin中，你的问题就解决了。我实际上在很多组件中使用mixin，特定于该组件的是根据窗口宽度使用不同的分页混合参数。