如何存储Vue组件数组并实现各组件内容的存取与切换？

核心思路 #

把每个Clip设计成包含自身内容的独立对象，存储在数组中，通过切换当前选中的Clip关联右侧编辑器的内容，同时将整个数组持久化到localStorage避免覆盖问题，无需一开始就使用Vuex。

具体实现步骤 #

1. 定义Clip数据结构
   每个Clip对象包含唯一ID、名称和专属内容字段，确保内容相互独立：

{
  id: Date.now(), // 用时间戳生成唯一ID
  name: `Clip ${序号}`,
  content: {
    image: null, // 存储图片地址/Base64
    video: null, // 存储视频地址/Base64
    text: ''     // 存储文本内容
  }
}

2. 组件内部状态管理
   在Vue组件的data中维护两个核心状态：

• clips: 存储所有Clip对象的数组
• currentClip: 当前正在编辑的Clip对象

3. 实现Clip的增删改查

• 添加Clip：点击按钮生成新的Clip对象，推入数组并设为当前选中项
• 切换Clip：点击左侧列表项，将currentClip切换为对应对象，右侧编辑器自动同步内容
• 编辑内容：右侧编辑器的输入框、上传控件直接绑定currentClip.content的对应字段，实时修改当前Clip的内容

4. localStorage持久化
   将整个clips数组转为JSON字符串存储，避免单条存储导致的覆盖问题：

• 组件初始化时从localStorage读取并解析数组
• 监听clips数组的变化（包括内容修改），自动同步到localStorage

完整代码示例 #

<template>
  <div class="clip-editor">
    <!-- 左侧Clip列表 -->
    <div class="clip-list">
      <button @click="addClip">添加新Clip</button>
      <div 
        v-for="clip in clips" 
        :key="clip.id"
        @click="selectClip(clip)"
        :class="{ active: clip === currentClip }"
      >
        {{ clip.name }}
      </div>
    </div>

    <!-- 右侧编辑器 -->
    <div class="editor" v-if="currentClip">
      <h3>编辑 {{ currentClip.name }}</h3>
      <!-- 图片上传 -->
      <input type="file" accept="image/*" @change="handleImageUpload">
      <img v-if="currentClip.content.image" :src="currentClip.content.image" alt="Clip图片">
      
      <!-- 视频上传 -->
      <input type="file" accept="video/*" @change="handleVideoUpload">
      <video v-if="currentClip.content.video" :src="currentClip.content.video" controls></video>
      
      <!-- 文本编辑 -->
      <textarea v-model="currentClip.content.text" placeholder="输入文本内容"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clips: [],
      currentClip: null
    };
  },
  created() {
    // 从localStorage加载保存的Clip数据
    const savedClips = localStorage.getItem('clips');
    if (savedClips) {
      this.clips = JSON.parse(savedClips);
      // 默认选中第一个Clip（如果存在）
      this.currentClip = this.clips[0] || null;
    }
  },
  methods: {
    addClip() {
      const newClip = {
        id: Date.now(),
        name: `Clip ${this.clips.length + 1}`,
        content: {
          image: null,
          video: null,
          text: ''
        }
      };
      this.clips.push(newClip);
      this.selectClip(newClip);
      this.saveToLocalStorage();
    },
    selectClip(clip) {
      this.currentClip = clip;
    },
    handleImageUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      // 将图片转为Base64存储（若需上传服务器，替换为上传逻辑即可）
      const reader = new FileReader();
      reader.onload = (event) => {
        this.currentClip.content.image = event.target.result;
        this.saveToLocalStorage();
      };
      reader.readAsDataURL(file);
    },
    handleVideoUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = (event) => {
        this.currentClip.content.video = event.target.result;
        this.saveToLocalStorage();
      };
      reader.readAsDataURL(file);
    },
    saveToLocalStorage() {
      localStorage.setItem('clips', JSON.stringify(this.clips));
    }
  },
  watch: {
    // 深度监听Clip数组变化，自动保存
    clips: {
      deep: true,
      handler() {
        this.saveToLocalStorage();
      }
    }
  }
};
</script>

<style scoped>
.clip-editor {
  display: flex;
  height: 100vh;
}
.clip-list {
  width: 220px;
  border-right: 1px solid #e5e7eb;
  padding: 16px;
}
.clip-list button {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  border: none;
  border-radius: 4px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
}
.clip-list > div {
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.clip-list > div.active {
  background: #dbeafe;
}
.editor {
  flex: 1;
  padding: 24px;
}
img, video {
  max-width: 100%;
  margin: 12px 0;
  border-radius: 4px;
}
textarea {
  width: 100%;
  min-height: 120px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  resize: vertical;
}
</style>

补充说明 #

• 若之后项目复杂度提升，需要多组件共享Clip状态，再考虑迁移到Vuex：核心数据结构不变，只需将clips和currentClip移到Vuex的state中，通过actions/mutations操作数据。
• 示例中用Base64存储图片/视频，适合小文件；若处理大文件，建议上传到服务器，存储文件URL即可。

内容的提问来源于stack exchange，提问作者Varada Raj