javascript - 无法读取未定义的 nuxt / vuex 的属性

Question

过去几天我一直在学习 vuex，并且一直坚持让 getter 在我的页面上呈现。在fruits.js 文件内的商店文件夹中，我有一个简单的对象数组，并尝试使用getter 添加过滤器并将结果呈现在列表中。当我在 vue 开发工具中检查 vuex 时，它显示了具有正确结果的 getter 过滤器，但是当我尝试在页面上渲染时，我收到了这个错误：

无法读取未定义的属性（读取“getYellowFruit”）

<template>
  <div class="getters-page">
    <div class="container text-white">  
    <ul class="w-2/4 pt-10">
      <li v-for="yellow in yellowFruit" :key="yellow">{{ fruit.name }}</li>
    </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    yellowFruit() {
      return this.$store.getters.fruits.getYellowFruit
    },
  },
}
</script>

商店文件夹中的fruits.js：

export const state = () => ({
  fruits: [
    { name: 'Apple', color: 'red' },
    { name: 'Orange', color: 'orange' },
    { name: 'Pineapple', color: 'yellow' },
    { name: 'Kiwi', color: 'green' },
    { name: 'Grapes', color: 'purple' },
    { name: 'Banana', color: 'yellow' },
  ],
})

export const mutations = {}

export const actions = {}

export const getters = {
  getYellowFruit: (state) => {
    return state.fruits.filter((fruit) => fruit.color === 'yellow')
  },
}

标签： javascriptvue.jsvuex