How can I do this in Vue 2?-CodePudding

I'm new and I'm trying to create this project that connects to an API using fetch, but I need to do it using Vue 2 and the examples I was using to learn were made on Vue 3. I've tried to look for way to downgrade with npm i [email protected] but my project only shows a bunch of errors.

I believe the problem is in the component part. There are terms that Vue 2 doesn't use right? I'm sorry this if is a super noob question but couldn't find the solution anywhere. Thanks!!

This my store 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: {
  }
})

And this is my component.vue

  <section>
    <div >
      <div  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>

CodePudding user response：

In Vue2 there is no setup function, so instead of:

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,
    };
  },
};

try to use 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 >
      <div  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>