我怎样才能在 Vue 2 中做到这一点？

Question

我是新手，我正在尝试创建这个使用 fetch 连接到 API 的项目，但我需要使用 Vue 2 来完成，我用来学习的示例是在视图 3。我试图寻找使用 npm i vue@2.6.11 降级的方法，但我的项目只显示一堆错误。

我认为问题出在组件部分。 Vue 2 没有正确使用某些术语？很抱歉，如果这是一个超级菜鸟问题，但无法在任何地方找到解决方案。谢谢！！

这是我的店铺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: {
  }
})

这是我的 component.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>

Answer 1

在 Vue2 中没有 setup 函数，所以不是：

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

尝试使用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>

我怎样才能在 Vue 2 中做到这一点？

How can I do this in Vue 2?

javascript

api

vuex

vuejs2

vuejs3