Vue遍历数组对象,添加属性,修改数据后不触发视图更新

Question

直接看代码:<template>    <ul>        <li v-for="obj in objs">            {{obj.added}} <!-- 始终显示的是默认值 -->            <button @click="changeAddedValue(obj)">改变新增属性值</button>        </li>    </ul>    </template><script>    export default {        computed: {            objs () {                return this.$store.state.objs.map( val => {                    val.added = '默认值'                    return val                })            }        },        methods: {            changeAddedValue (obj) {                obj.added = '改变后的值'            }        }    }</script>点击更改后没有,在 changeAddedValue(obj) 方法中可以执行修改,但是视图上并不更新那么问题是:这个问题该怎么解决?这个问题是由什么原因造成的?

Answer 1

$store中的状态不能直接更改，需要提交Mutations