He estado aprendiendo vuex durante los últimos días y estoy atascado en hacer que los captadores se rendericen en mi página. En la carpeta de mi tienda dentro del archivo fruit.js, tengo una matriz simple de objetos y estoy tratando de agregar un filtro usando captadores y mostrar los resultados en una lista. Cuando verifico vuex en las herramientas de desarrollo de vue, muestra el filtro getter con los resultados correctos, pero cuando intento renderizar en la página, aparece este error:

No se pueden leer las propiedades de undefined (leyendo '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>

fruit.js en la carpeta de la tienda:

 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') }, }