add AccentPhraseに個別idを設定

AccentPhraseを継承したEditorAccentPhraseという型を作成し、EditorAudioQueryのプロパティとした。

AudioDetail.vueファイルの中でaccentPhrases変数の変更のタイミングで割り振るように

src/components/Talk/AudioDetail.vue

@@ -60,7 +60,7 @@
         </ToolTip>
         <AccentPhrase
           v-for="(accentPhrase, accentPhraseIndex) in accentPhrases"
-          :key="accentPhraseIndex"
+          :key="accentPhrase.editorID"
           ref="accentPhraseComponents"
           :audio-key="activeAudioKey"
           :accent-phrase="accentPhrase"
@@ -234,6 +234,9 @@ const setPlayAndStartPoint = (accentPhraseIndex: number) => {
 };
 
 watch(accentPhrases, async () => {
+  await store.dispatch("SET_ACCENT_PHRASES_EDITORID", {
+    audioKey: props.activeAudioKey,
+  });
   activePoint.value = startPoint.value;
   // 連続再生時に、最初に選択されていた場所に戻るためにscrollToActivePointを呼ぶ必要があるが、
   // DOMの描画が少し遅いので、nextTickをはさむ

src/store/audio.ts

@@ -1012,6 +1012,26 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
       query.accentPhrases.splice(accentPhraseIndex, 1, ...accentPhrases);
     },
   },
+  SET_ACCENT_PHRASES_EDITORID: {
+    mutation(
+      state,
+      {
+        audioKey,
+      }: {
+        audioKey: AudioKey;
+      }
+    ) {
+      const accentPhrases = state.audioItems[audioKey].query?.accentPhrases;
+      if (accentPhrases)
+        accentPhrases.map((elem) => {
+          if (!elem.editorID)
+            elem.editorID = uuidv4();
+        });
+    },
+    action({ commit }, { audioKey }: { audioKey: AudioKey }) {
+      commit("SET_ACCENT_PHRASES_EDITORID", { audioKey });
+    },
+  },
 
   SET_AUDIO_MORA_DATA: {
     mutation(

src/store/type.ts

@@ -64,8 +64,12 @@ import { OverlappingNoteInfos } from "@/sing/storeHelper";
 /**
  * エディタ用のAudioQuery
  */
-export type EditorAudioQuery = Omit<AudioQuery, "outputSamplingRate"> & {
+export type EditorAudioQuery = Omit<
+  AudioQuery,
+  "outputSamplingRate" | "accentPhrases"
+> & {
   outputSamplingRate: number | "engineDefault";
+  accentPhrases: Array<EditorAccentPhrase>;
 };
 
 export type AudioItem = {
@@ -125,6 +129,9 @@ export type StoreType<T, U extends "getter" | "mutation" | "action"> = {
       : R
     : never;
 };
+export interface EditorAccentPhrase extends AccentPhrase {
+  editorID?: string;
+}
 
 /*
  * Audio Store Types
@@ -349,7 +356,12 @@ export type AudioStoreTypes = {
       accentPhrases: AccentPhrase[];
     };
   };
-
+  SET_ACCENT_PHRASES_EDITORID: {
+    mutation: {
+      audioKey: AudioKey;
+    };
+    action(payload: { audioKey: AudioKey }): void;
+  };
   SET_AUDIO_MORA_DATA: {
     mutation: {
       audioKey: AudioKey;