VueJS应用API调用后页面重载数据不更新问题求助

核心错误：Vuex Mutation笔误 #

你的setNumOfNewUsers mutation存在参数使用错误，导致后端返回的数据根本没有更新到Vuex状态中：

// 错误代码
setNumOfNewUsers(state: AdminState, numOfNewUsers) {
  state.newUsers = newUsers // 这里应该是numOfNewUsers，而非newUsers
}

这里参数名是numOfNewUsers，但你赋值时用了未定义的newUsers，最终会导致state.newUsers被赋值为undefined，JavaScript会自动将其转换为0（与state初始值一致），这就是你看到显示0而非后端返回数据的直接原因。

组件响应式问题 #

组件仅在mounted钩子中调用一次newUsers()更新本地data，但异步请求是耗时操作，mounted执行时请求大概率还未完成，此时拿到的是Vuex的初始值0；即便后续请求完成，由于没有监听Vuex状态变化，组件也不会自动更新DOM。

修复步骤 #

1. 修正Vuex Mutation #

将mutation中的赋值改为参数名：

setNumOfNewUsers(state: AdminState, numOfNewUsers) {
  state.newUsers = numOfNewUsers
}

2. 优化组件的响应式实现（二选一即可） #

方案一：直接绑定Vuex Getter（最简洁）

删除组件中的data和newUsers方法，模板中直接使用Vuex的getter，Vue会自动监听状态变化并更新DOM：

<template>
  <div>
    <h3>Users:</h3>
    <v-container class="grey lighten-5">
      <v-row no-gutters>
        <v-col>
          <v-card class="pa-2" outlined tile>
            New users:
          </v-card>
        </v-col>
        <v-col>
          <v-card class="pa-2" outlined tile>
            {{ $accessor.users.newUsers }}
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import {Component, Vue} from "vue-property-decorator";

@Component({
  created() {
    this.$accessor.users.loadNumOfNewUsers()
  }
})
export default class ShowNewUsers extends Vue {}
</script>

方案二：使用@Watch监听Vuex状态（保留本地data的场景）

如果需要保留本地data结构，使用@Watch装饰器监听Vuex的newUsers状态，自动更新本地data：

<template>
  <!-- 模板保持不变 -->
</template>

<script>
import {Component, Vue, Watch} from "vue-property-decorator";

@Component({
  created() {
    this.$accessor.users.loadNumOfNewUsers()
  }
})
export default class ShowNewUsers extends Vue {
  data = [
    { title: "New users:", value: -1 },
  ]

  @Watch("$accessor.users.newUsers")
  onNewUsersChange(newVal) {
    Vue.set(this.data[0], "value", newVal);
  }

  // 初始化时同步一次状态
  mounted() {
    this.onNewUsersChange(this.$accessor.users.newUsers);
  }
}
</script>

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