如何在存储中更新数据后重新渲染组件

Question

当 store 中的数据更新时，我无法重新渲染 table 组件，我有一个简单的 table 和 v-for 如下所示：

<tr v-for="d in getDatas" v-bind:key="d.id">

和更改页面的按钮：

<button class="fa fa-chevron-left" @click="previousPage"/>
<button class="fa fa-chevron-right" @click="nextPage"/>

我在打开我的组件之前将数据加载到我的数据中 table，我从存储中获取这些数据，如下所示：

  computed: {
    getDatas () {
      return this.$store.getters.getDatas;
    }
  },

但是当我点击按钮 nextPage 或 previousPage 时如何使用 data 更新我的商店？这是我的方法：

  methods: {
      ...mapActions(["fetchDatas"]), //this is my action
      nextPage() {
        this.currentPage += 1;
      },
      previousPage() {
        if(this.currentPage != 1) {
          this.currentPage -= 1;
        }
      },

我的行动：

    async fetchDatas({ commit },{ currentPage}) {
        const data = await fetch(`someURL&perPage=${currentPage}`);
        const response = await data.json();
        commit('setData', response);
    }

那么，当我点击 next/previousPage 时如何重新加载组件和我的商店？

Answer 1

您可以在 currentPage 变量上设置一个监视，在单击按钮后，getDatas 操作将在当前页面发生变化时再次触发。

手表可以这样声明：

watch: {
        currentPage: function (newValue) {
            this.$store.dispatch('fetchDatas', this.currentPage)
        },
}

Answer 2

您已经有一个 computed 属性，它会在您的商店更新时自动更新。您所要做的就是在更改页面的方法中触发操作。

nextPage() {
   this.currentPage += 1;
   this.fetchDatas(this.currentPage);
},
previousPage() {
   if(this.currentPage != 1) {
      this.currentPage -= 1;
      this.fetchDatas(this.currentPage);
   }
},

并且除非您有令人信服的理由要求操作的对象参数，否则我会完全删除花括号：

async fetchDatas({ commit }, currentPage) {
...

否则你需要用this.fetchData({currentPage: this.currentPage})调用它。

如何在存储中更新数据后重新渲染组件

How to re-render component after update data in store

javascript

typescript

vue.js

vuex