Soy nuevo y estoy tratando de crear este proyecto que se conecta a una API usando fetch, pero necesito hacerlo usando Vue 2 y los ejemplos que estaba usando para aprender se hicieron en Vue 3. Traté de buscar para la forma de degradar con npm i vue@2.6.11 pero mi proyecto solo muestra un montón de errores.
Creo que el problema está en la parte componente. Hay términos que Vue 2 no usa, ¿verdad? Lo siento, si es una pregunta súper novata, pero no pude encontrar la solución en ninguna parte. ¡¡Gracias!!
Esta es mi tienda index.js
export default createStore({ state: { games: [], gamesFilter: [] }, mutations: { setGames(state, payload) { state.games = payload }, setGamesFilter(state, payload) { state.gamesFilter = payload } }, actions: { async getGames({commit}) { try { const response = await fetch('https://www.moogleapi.com/api/v1/games/') const data = await response.json() commit('setGames', data) commit('setGamesFilter', data) } catch (error) { console.error(error) } }, }, modules: { } })Y este es mi componente.vue
<section> <div class="games"> <div class="games__item" v-for="game in games" :key="game.id"> <h1>{{ game.title }}</h1> <div> <img :src="game.picture" :alt="game.name" /> </div> <span>{{ game.platform }} - {{ game.releaseDate }}</span> <h3>{{ game.description }}</h3> </div> </div> </section> </template> <script> import { computed, onMounted } from "vue"; import { useStore } from "vuex"; export default { setup() { const store = useStore(); const games = computed(() => { return store.state.gamesFilter.slice(0, 15); }); onMounted(() => { store.dispatch("getGames"); }); return { games, }; }, }; </script>En Vue2 no hay una función de setup , así que en lugar de:
import { computed, onMounted } from "vue"; import { useStore } from "vuex"; export default { setup() { const store = useStore(); const games = computed(() => { return store.state.gamesFilter.slice(0, 15); }); onMounted(() => { store.dispatch("getGames"); }); return { games, }; }, }; intenta usar this :
export default { computed: { games() { return this.$store.state.gamesFilter.slice(0, 15) } }, mounted() { this.$store.dispatch("getGames"); } } var store = new Vuex.Store({ state: { games: [], gamesFilter: [] }, mutations: { setGames(state, payload) { state.games = payload }, setGamesFilter(state, payload) { state.gamesFilter = payload } }, actions: { async getGames({commit}) { try { const response = await fetch('https://www.moogleapi.com/api/v1/games/') const data = await response.json() commit('setGames', data) commit('setGamesFilter', data) } catch (error) { console.error(error) } }, }, }); new Vue({ el: '#demo', store, computed: { games() { return store.state.gamesFilter.slice(0, 15) } }, mounted() { store.dispatch("getGames"); } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.js"></script> <div id="demo"> <section> <div class="games"> <div class="games__item" v-for="game in games" :key="game.id"> <h1>{{ game.title }}</h1> <div> <img :src="game.picture" :alt="game.name" /> </div> <span>{{ game.platform }} - {{ game.releaseDate }}</span> <h3>{{ game.description }}</h3> </div> </div> </section> </div>