VUEJS 不能在模板中使用 api 响应数据

Question

我需要使用通过 api 调用 (axios) 获得的对象数组来填充 table。这部分工作正常。在商店模块 (activity.js) 中，我声明了数组：

currentUserActivities: [],

在突变中：

SET_CURRENT_USER_ACTIVITIES: (state, currentUserActivities) => {
  state.currentUserActivities = currentUserActivities
},

在行动中：

setCurrentUserActivities({ commit }, userId) {
  return new Promise((resolve, reject) => {
    getUserActivities(userId).then(response => {
      const currentUserActivities = response.results
      commit('SET_CURRENT_USER_ACTIVITIES', currentUserActivities)
      console.log('response current user activities: ', response.results)
      resolve()
    }).catch(error => {
      console.log('Error setting single user activities: ', error)
      reject(error)
    })
  })
},

然后我将它保存在 getters 模块中：

currentUserActivities: state => state.activity.currentUserActivities,

在vue页面中，脚本的相关部分：

data() {
  return {
    currentUser: {},
    userId: {
      type: Number,
      default: function() {
        return {}
      }
    },   
    currentUserActivities: [],
  }
 },
 mounted() {
   const userId = this.$route.params.userId
   this.$store.dispatch('user/setCurrentProfile', userId).then(() => {
     const currentUser = this.$store.getters.currentProfile.user
     this.currentUser = currentUser
     console.log('user mounted user', currentUser)
     this.$store.dispatch('activity/setCurrentUserActivities', userId).then(() => {
       const currentUserActivities = this.$store.getters.currentUserActivities
       console.log('activities on mounted', currentUserActivities)
     })
   }) 
 },

在模板部分，正如我所说，我将有一个 table 数据。让我们暂时忘记它，我只是想让数组原始显示，如下所示：

<div>
<p v-if="currentUserActivities.length = 0">
   This user has no activities yet.
</p>
<p>CURRENT ACTIVITIES: {{ currentUserActivities }}</p>
<p>CURRENT USER: {{ currentUser }}</p>
</div>

当前用户显示正常，在浏览器中我可以看到：

CURRENT USER: { "id": 1, "last_login": "20/09/2019 09:42:15", "is_superuser": false, "username": "admin", "first_name": "System", "last_name": "Dev", "email": "systems@dev.it", "is_staff": true, "is_active": false, "date_joined": "30/08/2019 09:03:40" }

当前用户活动数组，改为：

CURRENT ACTIVITIES: []

在控制台中我有两个，留下用户很好，当前用户活动数组是：

activities on mounted: 
0: {...}
1: {…}
2:
activity: (...)
arrival_point: "SRID=4326;POINT (0 0)"
burns_calories: false
co2: "0.00"
co2_production: (...)
cost: (...)
created: (...)
default_cost: (...)
end: (...)

等等。它就在那里，我们可以看到它。

在mounted里面，如果我们比较为用户和活动编写的代码，唯一的区别是我没有设置

this.currentUserActivities = currentUserActivities

如果我这样做，我也会丢失控制台中的数据（在屏幕上它仍然是空数组）。在控制台中我会：

activities on mounted: (5) [{…}, {…}, {…}, {…}, {…}, __ob__: Observer]
  1. length: 0
  2. __ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
  3. __proto__: Array

还有，即使我设置

v-if="currentUserActivities.length = 0"

显示 p 标签以防数组真的为空，它不会显示。这也不对。不知道有没有关系

我尝试了很多不同版本的代码，但 none 成功了。

我知道我遗漏了一些东西（代码永远不会错....）....

谁能赐教一下吗？

非常感谢。 x

Answer 1

首先，这个：

this.$store.dispatch('activity/setCurrentUserActivities', userId).then(() => {
  const currentUserActivities = this.$store.getters.currentUserActivities
  console.log('activities on mounted', currentUserActivities)
})

正如您在问题中指出的那样，您没有将 currentUserActivities 分配给任何东西。应该是这样的：

this.$store.dispatch('activity/setCurrentUserActivities', userId).then(() => {
  const currentUserActivities = this.$store.getters.currentUserActivities
  this.currentUserActivities = currentUserActivities
  console.log('activities on mounted', currentUserActivities)
})

我知道你提到这在问题中不起作用，但它是让它起作用所必需的。这还不够，但这是必要的。

数组显示为空的原因是因为：

v-if="currentUserActivities.length = 0"

请注意，您将 length 设置为 0，而不是将其与 0 进行比较。它应该是：

v-if="currentUserActivities.length === 0"

您还有一些其他问题，尽管它们与空数组没有直接关系。

一般来说，商店中的状态不应该有 data 值（除非您出于编辑目的而复制副本，而您似乎并非如此）。相反，它们应该作为计算属性公开，例如：

computed: {
  currentUser () {
    return this.$store.getters.currentProfile.user
  }
}

Vuex 包含一个名为 mapGetters 的助手，可用于稍微缩短它，请参阅 https://vuex.vuejs.org/api/#component-binding-helpers，尽管有些人更喜欢较长形式的明确性。

这个也有点奇怪：

return new Promise((resolve, reject) => {
  getUserActivities(userId).then(response => {

通常创建一个新的 promise 被认为是一种代码味道，因为它很少是必要的。在这种情况下，您可能应该 returning return 由 getUserActivities 编辑的承诺。例如：

return getUserActivities(userId).then(response => {

显然您需要进行其他调整以适应不再可用的 resolve 和 reject 功能。而不是 resolve 你只是 return 相关值（尽管在你的情况下似乎没有）而对于 reject 你只是抛出错误。

我还注意到您的 data 中的 userId 被分配了 type 和 default。请注意，这是 prop 语法，对 data 属性无效。这不是错误，但 userId 将等于整个对象，它不会将其视为配置对象。

VUEJS 不能在模板中使用 api 响应数据

VUEJS Can’t use api response data in the template

store

vuex

vuejs2