Tienda / acciones.js

 export default { async fetchData(context, route) { const dataURL = `myUrl.json`; const response = await fetch(dataURL); const responseData = await response.json(); let arr = []; if (!response.ok) { const error = new Error(responseData.message || 'Failed to fetch requests.'); throw error; } // Commit arr to mutation arr = responseData; context.commit('addArr', arr); }, }

Tienda / mutaciones.js

 export default{ addArr(state, payload) { state.arr = payload; } }

Tienda / estado.js

 export default () => ({ arr: [] })

Tienda / getters.js

 export default { getArr(state) { return state.arr; } }

Vue / myComponent.vue

 <template> <div> <pre> THIS WORKS FINE {{getArr}} </pre> <pre> THIS WORKS FINE {{myArr1}} </pre> <pre> THIS WORKS FINE {{myArr2}} </pre> <pre> THIS WORKS FINE {{myArr2}} </pre> <div v-for="(item, index) in sortArr" :key="item.id"> {{item.name}} .... </div> </div> </template> <script> import {mapGetters} from 'vuex'; export default { name: "myComponent", computed: { ...mapGetters(['getArr']), myArr1() { return this.getArr; }, myArr2() { return this.$store.getters.getArr; }, sortArr() { const unsortedArr = this.$store.getters.getArr; // const unsortedArr = this.myArr1; // const unsortedArr = this.myArr2; // Does not work, always returns empty array console.log(unsortedArr); let sortedArr = []; .... // unsortedArr gets now manipulated.. a lot of magic happens here.. return sortedArr; }, }, methods: { async fetchData() { await this.$store.dispatch('fetchData'); }, }, async created() { await this.fetchData; }, } </script>

Creo que tengo una falta fundamental de comprensión, cómo funcionan los getters de vuex.... Pensé que podría obtener mi matriz de getters y trabajar con ella en mi componente. Pero no es posible asignar el valor de mi getter a una variable y usarlo en otra propiedad o método calculado.

¿Hay una mejor manera de hacer esto? ¿Qué me estoy perdiendo? ¿Y cuál sería la solución para usar mi lista ordenada y manipulada de elementos en mi componente?

¡Gracias!