如何让 vuex 分页具有反应性？

Question

我不确定是什么问题。我正在创建一个 Vue/Vuex 分页系统，它调用我的 api 来获取我的项目列表。该页面最初在安装页面时加载所有项目。 Vuex 使用 axios 进行初始调用。 Vuex 查找项目和页数。一旦用户单击使用分页组件创建的分页，它应该会自动更改第 2...3 页等的项目。

我遇到的问题是，在您按页码两次之前它没有反应。我正在使用 vue 3。我试过不使用 Vuex 并且成功了。我正在尝试创建一个可以执行所有 axios 调用的商店。感谢您的帮助！

Vuex 商店

import { createStore } from 'vuex';
import axios from 'axios';

/**
 * Vuex Store
 */

export const store = createStore({
    state() {
        return {
            projects: [],
            pagination: {}
        }
    },
    getters: {
        projects: state => {
            return state.projects;
        }
    },
    actions: {
        async getProjects({ commit }, page = 1) {
            await axios.get("http://127.0.0.1:8000/api/guest/projects?page=" + page)
                .then(response => {
                    commit('SET_PROJECTS', response.data.data.data);
                    commit('SET_PAGINATION', {
                        current_page: response.data.data.pagination.current_page,
                        first_page_url: response.data.data.pagination.first_page_url,
                        prev_page_url: response.data.data.pagination.prev_page_url,
                        next_page_url: response.data.data.pagination.next_page_url,
                        last_page_url: response.data.data.pagination.last_page_url,
                        last_page: response.data.data.pagination.last_page,
                        per_page: response.data.data.pagination.per_page,
                        total: response.data.data.pagination.total,
                        path: response.data.data.pagination.path
                    });
                })
                .catch((e) => {
                    console.log(e);
                });
        }
    },
    mutations: {
        SET_PROJECTS(state, projects) {
            state.projects = projects;
        },
        SET_PAGINATION(state, pagination) {
            state.pagination = pagination;
        }
    },
});

组合组件

<template>
  <div>
    <div id="portfolio">
      <div class="container-fluid mt-5">
        <ProjectNav></ProjectNav>
        <div class="d-flex flex-wrap overflow-auto justify-content-center mt-5">
          <div v-for="project in projects" :key="project.id" class="m-2">
            <Project :project="project"></Project>
          </div>
        </div>
      </div>
    </div>
    <PaginationComponent
      :totalPages="totalPages"
      @clicked="fetchData"
    ></PaginationComponent>
  </div>
</template>

<script>
import Project from "../projects/Project.vue";
import PaginationComponent from "../pagination/PaginationComponent.vue";
import ProjectNav from "../projectNav/ProjectNav.vue";

/**
 * PortfolioComponent is where all the projects are displayed.
 */
export default {
  name: "PortfolioComponent",
  data() {
    return {
      location: "portfolio",
      projects: []
    };
  },
  components: {
    Project,
    PaginationComponent,
    ProjectNav,
  },
  mounted() {
    this.fetchData(1);
  },
  computed: {
    totalPages() {
      return this.$store.state.pagination.last_page;
    },
  },
  methods: {
    fetchData(page) {
      this.$store.dispatch("getProjects", page);
      this.projects = this.$store.getters.projects;
    },
  },
};
</script>

Answer 1

在您的 fetchData 方法中，您正在调用异步操作 getProjects，但您并没有等到返回的承诺得到解决。

尝试在您的 fetchData 方法中使用异步和等待。

  methods: {
    async fetchData(page) {
      await this.$store.dispatch("getProjects", page);
      this.projects = this.$store.getters.projects;
    },
  },

如何让 vuex 分页具有反应性？

How to get vuex pagination to be reactive?

vue.js

vuex