vuex 是不允许被直接修改的,所以我使用computed get set 来完成这部分功能.如下图代码: console.log('set') 无法触发.

但是可以从vue-dev-tool看到c已经改变, 问题是: computed没有触发set,为什么c变量可以被改变

import Vue from 'vue'

export default Vue.component('AttributesContainer', {

data () {

return {

html: ''

}

},

render (h) {

return h(Vue.extend({

template: `

${this.html}

`,

computed: {

c: {

get () {

return this.$store.state.attrs[this.$store.state.activeAttrs]

},

set (val) {

console.log('set')

let attrs = this.$store.state.attrs

let j = {}

j[this.$store.state.activeAttrs] = val

this.$store.commit('changeAttrs', window.Object.assign({}, attrs, j))

}

}

}

}))

},

computed: {

content () {

return this.$store.state.attrs[this.$store.state.activeAttrs]

}

},

watch: {

content: {

handler () {

let html = ''

let c = this.content

for (let i in c) {

let item = c[i]

if (i === 'name') continue

if (i === 'id') continue

html += '

'

html += `

html += '

'

if (item.type === 'bool') {

html += `默认`

html += `true`

html += `false`

} else if (item.type === 'number') {

html += ``

} else {

html += ``

}

html += '

'

html += '

'

}

this.html = html

},

deep: true

}

}

})

.AttributesContainer {

width: 300px;

}

>>>.item {

display: flex;

flex-direction: column;

}

>>>.item>div {

padding: 5px;

}

computed在vue-tool中确实被改变了, vuex数据却是没变。 computed中的依赖项是vuex数据啊, vuex数据没变的话,computed又为什么发生变化? 绝望中....

Logo

前往低代码交流专区

更多推荐