NuxtJS中fetch()赋值的变量在method()中变为空值的问题

核心问题 #

你踩了两个关键的坑：

• 误用数组存储键值对：testArray被定义为数组，但你却通过字符串键'key'给它添加属性——数组的设计初衷是存储有序的索引型数据，而非键值对结构，这种用法本身就不符合JS数组的规范。
• Vue响应式与Nuxt SSR的双重限制：Vue 2对数组的响应式追踪仅针对索引操作和数组变异方法（比如push、splice），不会监听数组的非索引属性；再加上Nuxt服务端渲染完成后，客户端的hydration阶段会基于初始data状态重建响应式数据，直接导致你在fetch中添加的自定义属性丢失。

修复方案 #

最合理且规范的做法是把testArray改为对象类型，因为你实际需要的是键值对存储：

<template>
  <div>
    <button @click="btnClick">
      Click
    </button>
  </div>
</template>

<script>
export default {
  name: 'TestPage',
  data () {
    return {
      testObj: {} // 替换为对象类型
    }
  },
  fetch () {
    this.testObj['key'] = '123321'
    console.log('Log1========================')
    console.log(this.testObj)
    console.log('====================================')
  },
  methods: {
    btnClick () {
      console.log('Log2========================')
      console.log(this.testObj)
      console.log('====================================')
    }
  }
}
</script>

如果确实有特殊需求必须用数组并添加额外属性（不推荐这种非常规用法），可以通过Vue.set手动触发响应式更新，确保数据能在客户端hydration后保留：

<script>
import Vue from 'vue'

export default {
  name: 'TestPage',
  data () {
    return {
      testArray: []
    }
  },
  fetch () {
    Vue.set(this.testArray, 'key', '123321')
    console.log('Log1========================')
    console.log(this.testArray)
    console.log('====================================')
  },
  methods: {
    btnClick () {
      console.log('Log2========================')
      console.log(this.testArray)
      console.log('====================================')
    }
  }
}
</script>

注意：数组的非索引属性不属于标准用法，会导致代码可读性下降，且容易引发类似的响应式问题，优先使用对象存储键值对才是正确选择。

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