Блог

Я изучал vuex в течение последних нескольких дней и застрял на том, чтобы заставить добытчиков отображать на моей странице. В папке моего магазина внутри fruits.js файл У меня есть простой массив объектов, и я пытаюсь добавить фильтр с помощью геттеров и отобразить результаты в виде списка. Когда я проверяю vuex в инструментах разработки vue, он показывает фильтр получения с правильными результатами, но когда я пытаюсь отобразить на странице, я получаю эту ошибку:

Не удается прочитать свойства неопределенного (чтение «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')
  },
}