めも

[riefuchi220]

created() { if (this.isDlg) { this.$store.commit('syncIndexes'); this.$store.commit('setViewMode', 'enlarged'); if (this.$store.getters.isAutoplaying) { this.startAutoplay(); } } else { this.localIndex = this.$store.getters.currentIndex; }

// 他のビューの再生を停止するリスナー
this.$root.$on('stop-autoplay-normal', this.handleStopAutoplay);
this.$root.$on('stop-autoplay-enlarged', this.handleStopAutoplay);

}, destroyed() { if (this.isDlg) { this.$store.commit('syncBackIndexes'); this.$store.commit('setViewMode', 'normal'); if (this.$store.getters.isAutoplaying) { this.stopAutoplay(); } }

// リスナーを削除
this.$root.$off('stop-autoplay-normal');
this.$root.$off('stop-autoplay-enlarged');

}

` // store.js const state = { images: [], // 初期値は空配列 currentIndex: 0, enlargedIndex: 0, isAutoplaying: false, playStatus: 'none', // 'none', 'play', 'stop' viewMode: 'normal', // 'normal' または 'enlarged' activeView: 'normal' // 再生中のビュー ('normal' または 'enlarged') };

const getters = { images: state => state.images, currentIndex: state => state.currentIndex, enlargedIndex: state => state.enlargedIndex, isAutoplaying: state => state.isAutoplaying, playStatus: state => state.playStatus, viewMode: state => state.viewMode, // ビューのモード activeView: state => state.activeView // 再生中のビュー };

const mutations = { setImages(state, images) { state.images = images; state.playStatus = 'none'; // 画像が更新されたら再生状態をリセット }, setCurrentIndex(state, index) { state.currentIndex = (index + state.images.length) % state.images.length; }, setEnlargedIndex(state, index) { state.enlargedIndex = (index + state.images.length) % state.images.length; }, setAutoplaying(state, isAutoplaying) { state.isAutoplaying = isAutoplaying; }, setPlayStatus(state, status) { state.playStatus = status; }, syncIndexes(state) { state.enlargedIndex = state.currentIndex; // 通常から拡大へ同期 }, syncBackIndexes(state) { state.currentIndex = state.enlargedIndex; // 拡大から通常へ同期 }, setViewMode(state, mode) { state.viewMode = mode; // ビューのモードを設定 }, setActiveView(state, view) { state.activeView = view; // 再生中のビューを設定 } };

const actions = { async fetchImages({ commit }) { const images = await fetchImagesFromAPI(); commit('setImages', images); } };

export default new Vuex.Store({ state, getters, mutations, actions }); `

---

`

`