Question

我遇到了一些问题。

我正在使用Vuex和Vue-router。

我有搜索组件。如果我在没有expanded标志的情况下进行搜索，我的后端会根据以下类别分类给出结果列表：

{
  'services': {
    count: 29,
    model: 'service'
    list: {
      0: {
        ...some data
      },
      1: {
        ...some data
      },
      ...
    }
  },
  'users' {
    count: 18,
    model: 'user'
    list: {
      0: {
        ...some data
      },
      1: {
        ...some data
      },
      ...
    }
  },
  ...
}

结果存储在Vuex商店中。

任何给定类别的最大尺寸为10件。如果count > 10有链接到扩展结果，例如

<div v-if="category.count > 10">
  <a href="#" @click.prevent="expand(category.model)">Expand results</a>
</div>

然后我从后端获得扩展结果：

expand(model, page = 1) {
  this.$store.commit('setLoadingStatus', true);
  this.model = model;
  window.axios.post('/api/search', {
    expand: true,
    query: this.data.query,
    page,
    model
  })
  .then(response => {
    response.data.data.query = this.data.query;
    this.$store.commit('addData', response.data)
    //this also updates store.state.paginator which contains last_page and current_page properties
  })
  .catch(...)
  .finally(...)
}

expanded标志状态存储在Vuex.store.state.meta.expanded中。

在搜索组件的模板中我有

<div v-if="$store.state.meta.expanded">
  <div class="row" v-for="record in data">
    {{ record }}
  </div>
  <paginator @goto="changePage"></paginator>
</div>

以下是Paginator组件代码：

<template>
  <div v-if="data.last_page > 1">
   <hr>
    <ul class="pagination">
      <li v-if="data.current_page === 1" class="page-item disabled">
        <span class="page-link">&lsaquo;</span>
      </li>
      <li v-else class="page-item">
        <a href="#" @click.prevent="$emit('goto', data.current_page-1)" class="page-link">&laquo;</a>
      </li>
      <li v-for="page in pages()" :class="{active: page === data.current_page, disabled: page === '...'}">
        <span v-if="page === data.current_page" class="page-link">{{ page }}</span>
        <a v-else href="#" @click.prevent="$emit('goto', page)" class="page-link">{{ page }}</a>
      </li>
      <li v-if="data.current_page >= data.last_page" class="page-item disabled">
        <span class="page-link">&rsaquo;</span>
      </li>
      <li v-else class="page-item">
        <a href="#" @click.prevent="$emit('goto', data.current_page+1)" class="page-link">&raquo;</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Paginator",
    computed: {
      data() {
        return this.$store.state.paginator
      },
    },
    methods: {
      pages() {
        let pages = [];
        if(this.data.last_page > 11) {
          if(this.data.current_page < 7) {
            for(let i = 1; i < 10; i++) {
              pages.push(i);
            }
            pages.push('...');
            pages.push(this.data.last_page)
          } else if((this.data.last_page - this.data.current_page) > 5 ) {
            pages.push(1);
            pages.push('...');
            for(let i = this.data.current_page - 3; i <= this.data.current_page + 3; i++) {
              pages.push(i)
            }
            pages.push('...');
            pages.push(this.data.last_page)
          } else {
            pages.push(1);
            pages.push('...');
            for(let i = this.data.last_page - 8; i <= this.data.last_page; i++) {
              pages.push(i)
            }
          }
        }
        return pages;
      }
    }
  }
</script>

当我点击链接时，Paginator组件会使用正确的页面发出goto事件。所以我从后端获取正确的数据：

changePage(page) {
  this.expand(this.model, page)
}

记录列表正在变化但是分页器组件没有更新current_page并且总是卡在第一页上。在Vue-devtools中，我可以看到paginator的数据属性正在正确更新，data.current_page反映了真实的页面，但是没有正确类的页面列表。

奇怪的是当我在Vue-devtools paginator组件的Vuex选项卡上按Commit All更改为正确的页面并且在页面重新加载之前正确反映更改。

我尝试使用计算属性pages代替方法 - 使用相同的结果。此外，我还尝试通过像<paginator :data="$store.state.paginator" @goto="changePage"></paginator>这样的父组件中的道具传递分页器数据，但无效。

我想我错过了一些关于Vue反应的内容，所以请求帮助。

PS：看起来组件没有更新，因为$ route.path没有改变。仍在努力想弄清楚该做些什么。

Vue2子组件未更新

0 个答案: