VUEJS 无法在模板中使用 api 响应数据

Question

我需要使用通过 api 调用 (axios) 获得的对象数组来填充表。 这部分工作正常。 在商店模块（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)
     })
   }) 
 },

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

<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: (...)

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

mounted里面，如果我们比较为user和activity写的代码，唯一的区别就是我没有设置

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 标签，它不会被显示。这也是不对的。不知道有没有关系。

我尝试了许多微妙的不同版本的代码，但都没有奏效。

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

有人能告诉我吗？

非常感谢。 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 被认为是一种代码味道，因为它很少需要。在这种情况下，您可能应该只返回由getUserActivities 返回的承诺。例如：

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

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

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