Vue.js -在刷新时使用当前localStorage更新数组

Question

当页面重新加载时，如果已经有项，我想检查localStorage，如果有，我想用当前值(标题和值)更新"cryptocurreny“。

当我用addCrypto()函数添加一些内容时，我的localStorage看起来如下所示：

{“名称”：“ETH”，“值”：“1.5”}，{“名称”：“BTC”，“值”：“2.75”}

这是我的组成部分：

<template>
  <div>

    <div v-for="coin in cryptocurrency">
      <input v-model="coin.name">
      <input v-model="coin.value">
    </div>
    <button @click="addCrypto">
      New Cryptocurreny
    </button>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      cryptocurrency: [],
    }
  },
  methods: {
    set_data() {
      localStorage.setItem( 'cryptocurrencies', JSON.stringify(this.cryptocurrency) );
      this.cryptocurrency = this.get_data();
    },
    get_data(){
      return localStorage.getItem('cryptocurrencies');
    },
    addCrypto() {
      localStorage.setItem( 'cryptocurrencies', JSON.stringify(this.cryptocurrency) );
      this.cryptocurrency.push({ name: '', value: ''});
    }
  }
}
</script>

但是我尝试在我的localStorage.getItem('cryptocurrencies');函数的末尾添加addCrypto()，但是我得到了错误，在页面重新加载时，addCrypto()变量是空的。

Answer 1

我不知道你在做什么，但从我所看到的情况来看，set_data()函数没有被调用到任何地方？

您将需要使用已挂载或创建的钩子(看看哪一个适合你)并在其中进行检查。

示例

mounted () {
  const saved = localStorage.getItem('cryptocurrencies')
  if (saved) {
    this.cryptocurrency = saved
  }
}

当然，您可以将这些代码放入自己的方法中，并在mounted()中进行调用。