App.vue

<script lang="ts">
import { defineComponent, computed, ref, watch } from 'vue';
import { useFilesStore, } from './stores/files'
import { marked } from "marked"

export default defineComponent({
  name: 'App',
  components: {},

  setup() {
    let store = useFilesStore()
    const storage = window.localStorage
    const createFile = store.createFile
    const markdown = ref<string>('')
    const currentLocalStorage = JSON.parse(storage.getItem("files") || "")

    if(!storage.getItem("files")) {
      storage.setItem("files", JSON.stringify(store.files))
    }
  
    watch(store.files, (files) => {
      storage.setItem("files", JSON.stringify(files))
    }, {deep: true});

    const markdownToHtml = computed(() => {
      return marked.parse(markdown.value)
    })

    return { store, markdownToHtml, markdown, createFile}
  }
});
</script>

<template>
  <div class="files">
    <button class="newFile" @click="createFile()">+ new File</button>
    <p v-if="!store.files.length">No files saved</p>
    <div v-if="store.files.length">
      <div v-for="file in store.files" :key="file.id">
        <h1>ID: {{ file.id }}</h1>
        <h2>Document: <input type="text" v-model="file.name"></h2>
        Content: <textarea type="text" class="html-content" v-model="markdown">
        </textarea>
        <p v-html="markdownToHtml"></p>
      </div>
    </div>
  </div>
</template>

存储/文件.ts

import { ref } from "vue"
import { defineStore } from "pinia"
import { nanoid } from "nanoid"
import Files from "../types/Files"

export const useFilesStore = defineStore("files", () => {

  const files = ref<Files[]>([])
  let currentFile = (null)

  async function createFile() {
    const newFile = {
      id: nanoid(),
      name: "new_document.md",
      date: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }),
      content: ""
    }
    files.value.push(newFile)
    currentFile = newFile
  }  

  return { files , createFile, currentFile }
})

我用的是pinia和 typescript 。提前感谢你的帮助。
我知道我需要做什么，但我不知道如何修复它。我见过vanilla javascript中的解决方案，但它们并没有像我想要的那样工作。我有一个currentLocalStorage变量，只是不知道在哪里以及如何使用它。