Vue.js页面刷新时从localStorage更新cryptocurrency数组问题

我来帮你搞定这个问题，你的代码里有几个小细节没处理好，导致页面刷新后cryptocurrency数组为空，下面是修复后的完整代码，再给你拆解一下问题所在：

<template>
  <div>
    <div v-for="(coin, index) in cryptocurrency" :key="index">
      <input v-model="coin.name" placeholder="币种名称">
      <input v-model="coin.value" placeholder="持有数量" type="number">
    </div>
    <button @click="addCrypto">New Cryptocurrency</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      cryptocurrency: [],
    };
  },
  created() {
    // 组件初始化时从localStorage加载数据
    this.loadCryptocurrencies();
  },
  methods: {
    // 保存数据到localStorage
    saveCryptocurrencies() {
      localStorage.setItem('cryptocurrencies', JSON.stringify(this.cryptocurrency));
    },
    // 从localStorage加载数据，处理无数据的情况
    loadCryptocurrencies() {
      const savedData = localStorage.getItem('cryptocurrencies');
      if (savedData) {
        // 把JSON字符串解析为数组
        this.cryptocurrency = JSON.parse(savedData);
      } else {
        // 如果没有数据，初始化一个空币种对象（可选，根据需求调整）
        this.cryptocurrency = [{ name: '', value: '' }];
      }
    },
    addCrypto() {
      // 先添加新的空币种对象
      this.cryptocurrency.push({ name: '', value: '' });
      // 再把更新后的数组保存到localStorage
      this.saveCryptocurrencies();
    },
  },
};
</script>

问题拆解与修复说明： #

• 缺少初始化加载逻辑
  你的组件在创建时没有从localStorage读取数据，所以刷新后cryptocurrency数组保持初始的空数组状态。我添加了created钩子，在组件初始化时调用loadCryptocurrencies方法加载数据。

• JSON字符串未解析
  之前的get_data方法直接返回localStorage的字符串数据，没有用JSON.parse解析成数组，这会导致数组变成字符串类型，甚至引发报错。现在loadCryptocurrencies方法里会先判断是否有保存的数据，再解析成数组。

• addCrypto方法逻辑顺序错误
  你之前是先把当前数组存到localStorage，再添加新对象，这就导致保存的是添加前的旧数据。现在调整为先添加新对象，再保存更新后的数组，确保localStorage里的数据是最新的。

• 冗余的赋值逻辑
  之前的set_data方法里试图把get_data的结果赋值给数组，这完全没必要，而且会因为get_data返回字符串导致类型错误，现在拆分了save和load方法，职责更清晰。

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