点击songlist的歌曲时，只会播放，不会插入到最前，vue getter不能实时刷新

Question

insertSong函数貌似也没有错，下面模块的同步也是正确的

我的问题类似于这个博客：https://www.cnblogs.com/xuanyubk/articles/7779465.html

<template>
 <transition name="slide">
   <div class="add-song" v-show="showFlag" @click.stop>
     <div class="header">
       <h1 class="title">添加歌曲到列表</h1>
       <div class="close" @click="hide">
         <i class="icon-close"></i>
       </div>
     </div>
     <div class="search-box-wrapper">
       <search-box ref="searchBox"  placeholder="搜索歌曲" @query="onQueryChange"></search-box>
     </div>
     <div class="shortcut" v-show="!query">
       <switches :switches="switches" :currentIndex="currentIndex" @switch="switchItem"></switches>
       <div class="list-wrapper">
         <scroll ref="songList" class="list-scroll" v-if="currentIndex === 0" :data="playHistory">
           <div class="list-inner">
             <song-list  :songs="playHistory" @select="selectSong">
             </song-list>
           </div>
         </scroll>
         <scroll  ref="searchList" class="list-scroll" v-if="currentIndex === 1" :data="searchHistory">
           <div class="list-inner">
             <search-list @delete="deleteSearchHistory" @select="addQuery" :searches="searchHistory"></search-list>
           </div>
         </scroll>
       </div>
     </div>
     <div class="search-result" v-show="query">
       <suggest :query="query" :showSinger="showSinger" @select="selectSuggest" @listScroll="blurInput"></suggest>
     </div>
     <!--<top-tip ref="topTip">-->
       <!--<div class="tip-title">-->
         <!--<i class="icon-ok"></i>-->
         <!--<span class="text">1首歌曲已经添加到播放列表</span>-->
       <!--</div>-->
     <!--</top-tip>-->
   </div>
 </transition>
</template>

<script type="text/ecmascript-6">
import SearchBox from 'base/search-box/search-box'
import Scroll from 'base/scroll/scroll'
import SearchList from 'base/search-list/search-list'
import SongList from 'base/song-list/song-list'
import Suggest from 'components/suggest/suggest'
import Switches from 'base/switches/switches'
import Song from 'common/js/song'
import {mapGetters, mapActions} from 'vuex'
import {searchMixin} from 'common/js/mixin'
export default {
 mixins: [searchMixin],
 data () {
   return {
     showFlag: false,
     // query: '',
     showSinger: false,
     currentIndex: 0,
     switches: [
       {name: '最近播放'},
       {name: '搜索历史'}
     ]
   }
 },
 computed: {
   ...mapGetters([
     'playHistory'
   ])
 },
 methods: {
   show () {
     this.showFlag = true
     this.refreshList()
   },
   refreshList () {
     setTimeout(() => {
       if (this.currentIndex === 0) {
         this.$refs.songList.refresh()
       } else {
         this.$refs.searchList.refresh()
       }
     }, 20)
   },
   hide () {
     this.showFlag = false
   },
   selectSuggest () {
     this.saveSearch()
   },
   switchItem (index) {
     this.currentIndex = index
   },
   selectSong (song, index) {
     // 因为第一个歌曲正在播放，所以选择没用
     // 这里的song是一个对象，并不是song实例 需要转换成song实例
     if (index !== 0) {
       this.insertSong(new Song(song))
     }
   },
   ...mapActions([
     'insertSong'
   ])

 },
 components: {
   SearchBox,
   Scroll,
   SearchList,
   Suggest,
   SongList,
   Switches
 }
}
</script>

Answer 1

ustbhuangyi 2019-01-10 18:02:44

刚仔细看了一下，你这页面播放歌曲就一堆报错，犯了个十分低级的错误



你仔细看看这个 key

先把这个问题修复了吧

• 提问者 baobaojiayou #1

  非常感谢！超级感谢！老师 爱你 我以后会注意的

Answer 2

提问者 baobaojiayou 2019-01-10 14:34:02

其实也就是这个问题vuex改变了state值，但是组件computed里面没有及时更新，如何解决

• ustbhuangyi #1

  不会有这个问题吧，你能写一段简单的 demo 最小化复现这个问题吗，我们来讨论一下？

• 提问者 baobaojiayou 回复 ustbhuangyi #2

  代码详情见 ：https://github.com/baohaojie123/vue-music 老师可以直接下载运行的。searchHistory也是这个情况。修改之后不能得到正确的getter

• 提问者 baobaojiayou 回复 ustbhuangyi #3

  已经困扰一个月了 跪谢老师

点开查看后面4条评论

Answer 3

ustbhuangyi 2019-01-10 14:26:01

贴一下你的相关代码？

• 提问者 baobaojiayou #1

  代码已贴

• 提问者 baobaojiayou #2

  代码详情见 ：https://github.com/baohaojie123/vue-music