localStorage使用循环Vue组件进行持久化

Question

让localStorage在本地机器上工作是最奇怪的一次。我似乎在我构建的数组中丢失了索引，我已经试了几个小时想弄清楚为什么，但运气绝对不好。我甚至尝试过不同的方法来构建阵列。

这是我用v-for循环加载的组件。这是意料之中的事。

主页.vue

<tweets
v-for="tweet in tweets"
v-bind:key="tweet.id"
v-bind:tweet="tweet"
></tweets>

这是制造麻烦的组件。它加载了许多可以投票的推文。(可以忽略HTML，我不确定它是否相关。(

花呢.vue

<template>
<div class="col-2 d-flex">
<div class="align-self-center ml-3">
<div class="row py-1">
<i
class="fas fa-arrow-up"
style="font-size: 30px"
v-on:click="voteUp"
></i>
</div>
<div class="row py-1">
<i class="fas fa-arrow-down" style="font-size: 30px"></i>
</div>
</div>
</div>

</template>
<script>
export default {
data: function () {
return {
localStorage: [],
};
},
props: {
tweet: Object,
},
created: function () {
this.localStorage = JSON.parse(localStorage.storageData);
console.log(this.localStorage);
},
methods: {
voteUp: function () {
axios
.get("/api/vote/2/1")
.then(({ data }) => {
var test = {
"tweet_id": 1,
"vote_status": 1
};
this.localStorage.push(test);
console.log(this.localStorage);
localStorage.setItem("storageData", JSON.stringify(this.localStorage));
console.log("go");
//persist?

})
.catch(function (error) {
alert("Take a screen shot and send this to me." + error);
console.log(error);
});
},

},
};
</script>

因此，如果你看一下我的localStorage变量，我会将其设置为浏览器中的当前localStorage，然而。。。它有一个奇怪的问题，如果我点击触发voteUp函数的按钮，它有时会删除数组中的一些索引。我很难解释，所以我制作了一个快速视频来演示。

https://streamable.com/kkhnrx

正如你所看到的，我正在启动事件，数组开始增长，但当我向下滚动到不同的按钮时(记住推文是循环的(，数组将丢失一些索引。我不知道为什么会发生这种事。我认为这与正在循环的组件和范围问题有关？

Answer 1

这看起来和比赛条件完全一样。有多个组件实例在存储上竞争，最终会被覆盖。

这使得早期副本不会包含来自其他实例的更新：

this.localStorage = JSON.parse(localStorage.storageData)

this.localStorage应该在更新存储之前立即分配，或者所有组件实例都应该有一个公共状态(例如，通过使用具有持久性的Vuex(。

Answer 2

您创建的函数中有一个错误，对吧？

如果你想得到"；storageData"；从本地存储应该是：

created: function () {
this.localStorage = JSON.parse(localStorage.getItem('storageData'));
console.log(this.localStorage);
},