巧用 Vue.js 遍历 $store.state 中数组，轻松展示图标

在 Vue.js 中，$store.state 是一个存储应用程序状态的响应式对象。我们可以将数据保存在 $store.state 中，然后在组件中使用它们。

如果你需要遍历一个存储在 $store.state 中的数组并展示图标，可以使用以下方法：

<template>
  <div>
    <ul>
      <li v-for="k in $store.state.outtitle" :key="k">
        <i class="iconfont" :class="'icon-' + k"></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    outtitle() {
      return this.$store.state.outtitle;
    },
  },
};
</script>

在这个例子中，我们将 $store.state.outtitle 中的数组遍历，然后为每个数组项创建一个 <li> 元素。每个 <li> 元素包含一个带有 iconfont 类的 <i> 元素，以及一个附加的类，其值为 'icon-' 加上数组项。这样，就可以使用字体图标库中的适当图标来表示每个数组项。

以下是这种方法的优点：

• 简洁方便： 这种方法简单易懂，便于实施。
• 响应式： 它使用 Vue.js 的响应式系统，因此当 $store.state.outtitle 发生变化时，图标也会自动更新。
• 灵活： 这种方法适用于各种图标库，只要它们提供适当的 CSS 类。

需要注意的限制：

• 依赖 CSS： 这种方法依赖于 CSS 来渲染图标，因此确保正确包含和加载 CSS 文件非常重要。
• 性能： 如果数组很大，遍历它可能会影响性能。在这种情况下，可以考虑使用虚拟滚动或其他优化技术。

示例：

假设你有一个名为 outtitle 的数组，其中包含以下值：

["home", "user", "star"]

使用上述方法，你会得到以下结果：

<ul>
  <li><i class="iconfont icon-home"></i></li>
  <li><i class="iconfont icon-user"></i></li>
  <li><i class="iconfont icon-star"></i></li>
</ul>

这样，就可以轻松地在 Vue.js 中遍历 $store.state 中的数组并展示图标。