localStorage 与循环的 Vue 组件保持一致答案

【问题标题】：localStorage persisting with looped Vue componentlocalStorage 与循环的 Vue 组件保持一致
【发布时间】：2021-05-08 06:17:56
【问题描述】：

让 localStorage 在我的本地计算机上工作是最奇怪的。我似乎在我构建的数组中丢失了索引，我已经尝试了几个小时来弄清楚为什么完全没有运气。我什至尝试过不同的方式来构建数组。

这是我使用 v-for 循环加载的组件。这按预期工作。

home.vue

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

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

tweets.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

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

【问题讨论】：

例子太大了，无法接受，见stackoverflow.com/help/mcve。

标签： laravel vue.js vuejs2

【解决方案1】：

这看起来完全像竞态条件。有多个组件实例竞争存储，最终会被覆盖。

这会生成一个不包含来自其他实例的更新的早期副本：

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

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

【讨论】：

【解决方案2】：

你创建的函数有错误，对吧？

如果你想从本地存储中获取“storageData”，它应该是：


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

【讨论】：