VueJS中切换日期过滤器后表格数据未正确更新如何解决？

你的代码核心问题出在异步请求的执行顺序错误和本地数据未与Vuex状态自动联动两个点：

1. 分页/过滤请求是异步操作，但你在部分场景下没有等待请求完成就同步读取旧的Vuex数据赋值给本地渲染变量
2. 手动维护本地bookings、newBookingsAmount等渲染变量，没有和Vuex的源数据做自动绑定，容易出现赋值遗漏、时机错误

1. 修正异步逻辑执行顺序 #

所有调用getBookingsList的地方都要加await等待请求完成、Vuex数据更新后，再做后续操作：

• 给handlePaging方法添加async修饰符，调用getBookingsList前加await
• refresh方法中先更新路由到第1页，再用新参数发起请求，避免请求旧页码数据

// 修复后的handlePaging示例
async handlePaging(page) {
  const rootElement = document.querySelector('.main-content')
  rootElement?.scrollTo(0, 0)
  
  // 等待接口请求完成、Vuex数据更新
  switch (this.caller) {
    case callerOptions.ADMIN:
      await this.getBookingsList({
        ...this.filters,
        page: page,
        take: TAKE_ITEMS_PER_PAGE,
      })
      break
    // 其余case同理统一加await
  }

  await this.$router.push({
    name: this.$route.name,
    query: { page: page, mode: this.mode },
  }).catch(() => {})
  // 后续改用计算属性的话，这里的手动赋值逻辑可以全部删除
}

2. 替换本地手动维护变量为计算属性，自动同步Vuex状态 #

删掉data里的bookings、newBookingsAmount、pages三个变量，全部改成从Vuex派生的计算属性，只要Vuex的bookingsList更新，渲染值会自动同步，不需要手动赋值：

computed: {
  ...mapGetters(['bookingsList', 'bookingsPages']), // 记得把bookingsPages也加到Vuex的getters里做映射
  today() {
    // 原有逻辑保持不变
  },
  // 自动排序后的订单列表
  bookings() {
    if (!this.bookingsList) return []
    const newList = this.bookingsList.filter(item => this.isNew.includes(item.status))
    const otherList = this.bookingsList.filter(item => !this.isNew.includes(item.status))
    return [...newList, ...otherList]
  },
  // 新订单数量自动计算
  newBookingsAmount() {
    return this.bookingsList?.filter(item => this.isNew.includes(item.status))?.length || 0
  },
  // 总页数自动取值
  pages() {
    return this.bookingsPages ?? 1
  }
}

改完后refresh和handlePaging方法里所有手动给this.bookings、this.newBookingsAmount、this.pages赋值的代码都可以删掉，避免重复维护。

3. 检查Vuex的状态更新逻辑是否符合Vue2响应式规则 #

确认你更新bookingsList的Mutation是直接替换整个数组，而非用索引修改/push等可能触发响应式失效的写法：

// 正确的Mutation更新示例
SET_BOOKINGS_LIST(state, payload) {
  state.bookingsList = payload.list
  state.bookingsPages = payload.pages
}

4. 冗余代码清理 #

删掉watch里的空监听逻辑，没有实际作用反而会占用性能。

内容的提问来源于stack exchange，提问作者sashafromlibertalia