🕌

【音楽ファイル詳細表示機能】トップページから詳細ページに音声ファイルのデータを渡す

2021/08/04に公開

storeへデータ渡し

エラー

unknown action type: setMusicFileData

解決

store/index.js

import Vuex from "vuex";
import musicFiles from "./music-files.js"

const store = () => new Vuex.Store({
  modules: {
    musicFiles
  }
})

export default store

store/music-files.js

const namespaced = true

const state = {
  musicFileData: [],
}

const getters = {
  musicFileData: state => state.musicFileData
}

const mutations = {
  setMusicFileDataMutations(state, musicFileData) {
    state.musicFileData = musicFileData
  }
}

const actions = {
  setMusicFileData(vuexContext, payload) {
    const musicFiledatum = {
      clickedFileTitle: payload.clickedFileTitle,
      clickedFileCoverImage: payload.clickedFileCoverImage,
    }
    const musicFileData = [];
    musicFileData.push(musicFiledatum)
    vuexContext.commit('setMusicFileDataMutations', musicFileData)
  }
}

export default {
  namespaced,
  state,
  mutations,
  actions,
  getters
}

詳細ページでデータを表示できない

                    <div class="b-1-3">
                        <div>音声ファイルに設定された画像</div>
                        {{ $store.getters.musicFileData }}
                        <img :src="`${$axios.defaults.baseURL}storage/${$store.getters.musicFiledatum[0].clickedFileCoverImage}`" class="cover-image">
                    </div>

音声ファイル押下時に値がセットされていることは確認できた
top

  methods: {
    setMusicFileData (clickedFileTitle, clickedFileCoverImage) {
      this.clickedFileTitle = clickedFileTitle
      this.clickedFileCoverImage = clickedFileCoverImage
      this.$store.dispatch('musicFiles/setMusicFileData', {
        clickedFileTitle: this.clickedFileTitle,
        clickedFileCoverImage: this.clickedFileCoverImage
        // items: this.items,
        // items: this.items,
        // items: this.items,
      })
      console.log('setMusicFileData')
      console.log(this.clickedFileTitle)
      console.log(this.clickedFileCoverImage)
    }
  },

続き

Discussion