🙄

wip 【音楽ファイル詳細表示機能】storeをモジュール化して、getterを参照したい

2021/08/04に公開

成功
store/musicFiles.js

export const state = () => ({
  musicFileData: [],
})

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

export const mutations = {
  setMusicFileDataMutations(state, musicFileData) {
    // console.log(musicFileData)
    console.log(state.musicFileData)
    state.musicFileData = musicFileData
  }
}

export const actions = {
  setMusicFileData(context, payload) {
    
    const musicFiledatum = {
      clickedFileTitle: payload.clickedFileTitle,
      clickedFileCoverImage: payload.clickedFileCoverImage,
      clickedFileMusicfile: payload.clickedFileMusicfile,
      clickedFileUserName: payload.clickedFileUserName,
    }
    const musicFileData = [];
    musicFileData.push(musicFiledatum)
    console.log(musicFiledatum)
    context.commit('setMusicFileDataMutations', musicFileData)
  }
}

pages/TopAfterLogin.vue

  methods: {
    setMusicFileData (clickedFileTitle, clickedFileCoverImage, clickedFileMusicfile, clickedFileUserName) {
      this.clickedFileTitle = clickedFileTitle
      this.clickedFileCoverImage = clickedFileCoverImage
      this.clickedFileMusicfile = clickedFileMusicfile
      this.clickedFileUserName = clickedFileUserName
      this.$store.dispatch('musicFiles/setMusicFileData', {
        clickedFileTitle: this.clickedFileTitle,
        clickedFileCoverImage: this.clickedFileCoverImage,
        clickedFileMusicfile: this.clickedFileMusicfile,
        clickedFileUserName: this.clickedFileUserName,
      })
    }
  },

pages/MusicFileDetail.vue

                    <h2 v-for="(musicFiledatum, index) in $store.getters['musicFiles/musicFileData']" :key="index">{{ musicFiledatum.clickedFileUserName }}</h2>

                <h3 v-for="(musicFiledatum, index) in $store.getters['musicFiles/musicFileData']" :key="index">{{ musicFiledatum.clickedFileTitle }}</h3>
		
                    <audio controls v-for="(musicFiledatum, index) in $store.getters['musicFiles/musicFileData']" :key="index">
                        <source :src="`${$axios.defaults.baseURL}storage/${musicFiledatum.clickedFileMusicfile}`" type="audio/mp3">
                    </audio>

                        <p v-for="(musicFiledatum, index) in $store.getters['musicFiles/musicFileData']" :key="index"><img :src="`${$axios.defaults.baseURL}storage/${musicFiledatum.clickedFileCoverImage}`" class="cover-image"></p>

あとでこれやりたい

参考

https://jp.vuejs.org/v2/guide/list.html

Discussion