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) 方法中可以执行修改,但是视图上并不更新

那么问题是:

1. 这个问题该怎么解决?

2. 这个问题是由什么原因造成的?

Answer 1

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