我如何从localStorage获得数据，以显示在homePosts vue.js组合API

Question

我正在做一个简单的博客应用程序来练习vue.js。我用的是复合API。我已经存储了要在表单中填写的数据。这个数据我想在另一个组件homePosts中打印出来，在那里你可以看到写的博客文章，作者，标题和blogtext。我使用v-model，将数据存储到localStorage，在homePosts中我使用v-for和{{ }}语法来获取数据。但是homePosts没有显示。
有人能看看我错过了什么吗?

writePost.vue

<template>
<div>
<form class="form">
<label for="writer">Writer name: </label>
<input v-model="newWriter" type="text" max="500" />
<br />
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*" />
<br />
<label for="headline">Headline </label>
<input v-model="newHeadline" type="text" max="500" />
<label>Your blogtext: </label>
<textarea v-model="newNote" name="" id="" cols="30" rows="30"></textarea>
<button type="submit" @click="addNote" class="button"><router-link to="/homePosts" class="link">Post blog</router-link></button>
</form>
</div>
</template>
<script setup>
import { ref } from "vue";

const newNote = ref("");
const newWriter = ref("");
const newHeadline = ref("");
const notes = ref([]);


const addNote = () => {
notes.value.push({
id: Math.floor(Math.random() * 1000000),
text: newNote.value,
writer: newWriter.value,
headline: newHeadline.value,
});

addLocalStorage(notes)

};
const addLocalStorage = (notes) => {

localStorage.setItem("notes", JSON.stringify(notes))
JSON.parse(localStorage.getItem("notes"));    
}
</script>

homePosts.vue

<template>
<div class="post-container">
<h1>Blog Posts</h1>
<div class="post-mini-container" > 
<div  class="post" v-for="note in notes" :key="note.id">
<!-- <img class="img-post" src="@/assets/person1.jpg"> -->
<p class="writer"> {{ note.writer }}</p>
<p class="headline"> {{ note.headline }}</p>
<p class="blog-text" > {{ note.text }}</p>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'homePosts'
}

</script>

Answer 1

你需要开始你的ref已经解析你的localStorage中的现有项目。

const notes = ref(JSON.parse(localStorage.getItem('notes') ?? '[]');

或者更好，使用计算的getter/setter:

const notes = computed({
get: () => JSON.parse(localStorage.getItem('notes') ?? '[]'),
set: (value) => {
localStorage.setItem('notes', JSON.stringify(value))
}
});

或者更好，看看veuse/useLocalStorage🎉

Answer 2

您可以采用两种方法，"事件总线";或者"pinia/vuex"。我将解释如何实现事件总线

(你可以查看这篇文章的灵感:https://medium.com/@certosinolab/using-event-bus-in-vue-js-3-425aae8c21a6)

1. 添加全局事件总线

• install mit:npm install --save mitt
• 转到您的主目录。并添加全局属性

import mitt from 'mitt';
const dispatcher = mitt();
const app = createApp(App);
app.config.globalProperties.dispatcher = dispatcher;
app.mount('#app');

2. update "script"内容在writePost。vue组件

   <script setup>
   import { ref , getCurrentInstance } from "vue";
   const app = getCurrentInstance(); 
   const dispatcher= app?.appContext.config.globalProperties.dispatcher;
   const newNote = ref("");
   const newWriter = ref("");
   const newHeadline = ref("");
   const notes = ref([]);
   const addNote = () => {
   notes.value.push({
   id: Math.floor(Math.random() * 1000000),
   text: newNote.value,
   writer: newWriter.value,
   headline: newHeadline.value,
   });
   // emit notes
   dispatcher.emit("updateNotes" , notes);
   addLocalStorage(notes)
   };
   const addLocalStorage = (notes) => {
   localStorage.setItem("notes", JSON.stringify(notes))
   JSON.parse(localStorage.getItem("notes"));    
   }
   </script>
   

3. 更新"script"内容在homePosts。vue组件

<script>
export default {
name: 'homePosts',
data() {
return {notes: []}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem("notes") ?? "[]");

this.dispatcher.on("updateNotes" , (notes) => {
this.notes = notes ?? [];
})
},
beforeDestroy() {
this.dispatcher.off("updateNotes");
},
}

</script>