vue 获取...mapState成功却无法赋值给data

Question

问题是这样发生的：

<audio :src='modle.src' controls ref="audio" @loadedmetadata="loadedmetaData" preload="metadata" id="volume" @timeupdate="timeupDate" style="display:none" autoplay></audio>

这是我的一个audio标签，src给了一个data的空值。

data() {
    return {
      name:'Playmusic',
      modle:''
      }
    }

想着动态改变modle就可以更新audio的src了

  computed:{
  ...mapState([
    'playmusic','items'
  ])
}

通过vuex又获得了两个对象，两个对象都可以得到正常的值。

created() {
  this.modle=items
  this.modle=playmusic
}

在另外的组件中，分别可以提交items和playmusic，我提交哪个audio的src就应该使用哪个对象 可是却没有反应。
希望大大们指正一下错误，是不是钩子使用错了 谢谢哈

Answer 1

如果playmusic就是音频地址, 那么可以直接写成 <audio :src='playmusic'

created 里给modle赋值, 只能取到vuex的初始值, 对于后面修改的, 或者是异步的, created无能为力

如果你一定要这么写, 可以赋值写到watch里去

Answer 2

每次都要单机一下Playmusic组件才可以生效。
playmusic和items都是对象，但是他们的属性包含src,这两个对象分别是另外两个组件通过vuex提交过来的对象。

computed:{
// ...mapState([
// 'playmusic','items'
// ])
playmusic () {

return this.modle=this.$store.state.playmusic

}
// items () {
// return this.modle=this.$store.state.items
// }
}
我现在把他们放到computed里面进行赋值，已经可以达到更改了，但是出现了一个bug，就是我提交对象以后，并不是立马更改了modle，而是要我在chrome的控制台里，单机一下vue组件名才行，不知道这是为什么。

Answer 3

computed model => return mapState里的属性

Answer 4

不明白为什么不直接写成

<audio :src='playmusic.src' >

如果用计算属性也该这么写

 modle () { //非 playmusic
        return this.$store.state.playmusic
    }