在 vuex 中状态更改后，Vue 组件的视图不会重新渲染？

Question

最近我开始学习 vue 和它的 redux 对应物 vuex。但是由于某种原因，vuex 中的状态变化不会触发 vue 组件中视图的反应性更新。

export const store = new Vuex.Store({

    state: {

        user: {

            id: -1,

            books: []

        }

    },

    mutations: {

        ADD_BOOK(state, book) {

            state.user.books.push(book);

        }

    },

    actions: {

        addBook(context, book) {

            context.commit('ADD_BOOK', book);

        }

    },

    getters: {

        books: state => {return state.user.books}

    }

})

在我的 vue 组件中：

<template>

    <div>

        ...

        <div>

            <ul>

                <li v-for="book in books">

                    {{ book.name }}

                </li>

            </ul>

        </div>

        <div>

            <form @submit.prevent="onSubmit()">

                <div class="form-group">

                    <input type="text" v-model="name" placeholder="Enter book name">

                    <input type="text" v-model="isbn" placeholder="Enter book isbn">

                </div>

                <button type="submit">Submit</button>

            </form>

        </div>

        ...

    </div>

</template>

<script>

module.exports = {

    data () {

        return {

            isbn: ''

            name: ''

            testArr:[]

        }

    },

    methods: {

        onSubmit: function() {

            let book = {isbn: this.isbn, name: this.name};

            this.$store.dispatch('addBook', book);

            // If I do `this.testArr.push(book);` it has expected behavior.

        }

    },

    computed: {

        books () {

            return this.$store.getters.user.books;

        }

    }

}

我正在访问 vuex 商店的书籍，computed并在我提交表单数据后，从 vuejs 开发人员工具扩展中，我看到 vuex 以及组件的计算属性的变化。但是我在提交后没有看到视图得到更新。知道我在这里缺少什么吗？

Answer 1

问题出在computed物业上。它应该是：computed: {&nbsp;books () {&nbsp; &nbsp;return this.$store.getters.books;&nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;}为方便起见，您可以使用vuex mapGetters：import { mapGetters } from 'vuex'export default {&nbsp; //..&nbsp; computed: {&nbsp; &nbsp; ...mapGetters(['books'])&nbsp; }}

Answer 2

为此，您需要观看请注意这个例子：methods: {...},computed: {&nbsp; &nbsp; books () {&nbsp; &nbsp; &nbsp; &nbsp; return this.$store.getters.books;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;},watch: {&nbsp; &nbsp; books(newVal, oldVal) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('change books value and this new value is:' + newVal + ' and old value is ' + oldVal)&nbsp; &nbsp; }}现在你可以重新渲染你的组件<template>&nbsp; &nbsp; <div :key="parentKey">{{books}}</div></template>data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; parentKey: 'first'&nbsp; &nbsp; }}只是你需要parentKey在手表上改变watch: {&nbsp; &nbsp; books(newVal, oldVal) {&nbsp; &nbsp; &nbsp; &nbsp; this.parentKey = Math.random()&nbsp; &nbsp; }}