Vuex获取的allProducts无法用v-for循环渲染的解决办法

Store 状态（Vue Devtools 截图） #

组件代码 #

<template>
  <div>
      <div
        v-for="product in allProducts"
        :key="product._id"
      >
        {{ product.brand }}
      </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return{
      allProducts:[],
    }
  },
  computed: {
    ...mapGetters(["allProducts"])
  },
  mounted() {
    this.$store.dispatch("getProducts");
  }
};
</script>

问题描述 #

直接输出 {{allProducts}} 能正常显示全部产品，但使用 v-for 遍历 allProducts 渲染 product.brand 时，页面无内容显示。

解决方案 #

1. 移除 data 中重复的 allProducts 定义 #

组件的 data 里声明了同名的 allProducts 空数组，Vue 属性查找优先级是 data/props > computed，导致组件实际使用的是 data 里的空数组，而非 Vuex getter 返回的产品列表。

修改后的 data 部分：

data() {
  return{
    // 移除 allProducts 定义
  }
},

2. 确认 getter 返回格式为数组 #

从截图看 getter 返回的是键值对形式的对象，若要确保 v-for 遍历正常，可在 Vuex getter 中将对象转为数组：

// Vuex getter 示例代码
allProducts: state => {
  return Object.values(state.products);
}

3. 检查异步更新的响应式 #

确保 getProducts action 执行完成后，通过 mutation 正确更新 state（不要直接修改 state），保证状态变更的响应式。

内容的提问来源于stack exchange，提问作者jibzy