心路历程：如何在 uni-app 中使用 Vuex 实现动态 class 设置？

在前端开发中，class 属性通常用于控制元素的样式，而动态 class 设置则允许我们在运行时根据某些条件来更改元素的样式。uni-app 作为一款跨平台开发框架，也支持动态 class 设置，本文将探讨如何使用 Vuex 在 uni-app 中实现这一功能，以及解决相关问题的心路历程。

问题发现：

起因：

在项目中，需要根据用户选择的产品项动态设置元素的 class，以便进行样式控制。然而，在某些情况下，class 无法正确设置，导致样式混乱。

问题

• 在点击添加产品项时，class 无法成功设置，但当取消选中时，class 却可以正常设置。

初次尝试：

第一步：

假设 selectArr 为一个保存所选产品项的数组，并在组件的 data() 中将其初始化为一个空数组。

第二步：

在点击添加产品项时，使用 push() 方法将选中的产品项添加到 selectArr 中，并在 watch 选项中监听 selectArr 的变化，以便在发生变化时更新组件的状态。

第三步：

在模板中，使用 :class="selectArr.includes(item.id) ? 'active' : ''" 对元素设置 class。

问题复现：

意外结果：

在使用上述方法后，当点击添加产品项时，仍然无法正确设置 class，而当取消选中时，class 却可以正常设置。

逐步探索：

深入分析：

• 将 selectArr 初始化为空数组的目的是为了避免初始渲染时，由于数组为空而导致的错误。
• 在点击添加产品项时，使用 push() 方法将选中的产品项添加到 selectArr 中，但无法正确设置 class。
• 在取消选中时，selectArr 中的项目被移除，class 可以正常设置。

最终解决方案：

问题根源：

在模板中使用 :class="selectArr.includes(item.id) ? 'active' : ''" 来设置 class 时，由于 selectArr 是一个响应式对象，每次点击操作都会触发数据更新，导致组件重新渲染。而当 selectArr 为空数组时，Vuex 会将 selectArr 设置为 undefined，进而导致 class 无法正确设置。

改进方案：

为了解决这个问题，需要在 watch 选项中监听 selectArr 的变化，并在发生变化时，使用 setTimeout() 方法延迟更新组件的状态。

具体代码如下：

watch: {
  selectArr(newValue) {
    setTimeout(() => {
      this.$forceUpdate();
    }, 0);
  },
},

小结：

在 uni-app 中使用 Vuex 实现动态 class 设置时，需要注意以下几点：

• selectArr 应该是一个响应式对象，并在组件的 data() 中初始化。
• 在模板中使用 :class="selectArr.includes(item.id) ? 'active' : ''" 来设置 class 时，需要注意 selectArr 可能为空数组的情况。
• 可以使用 watch 选项监听 selectArr 的变化，并在发生变化时，使用 setTimeout() 方法延迟更新组件的状态。

希望本文对您在 uni-app 中使用 Vuex 实现动态 class 设置有所帮助。如果您有任何问题或建议，欢迎留言评论。