javascript - Vue component's view doesn't re-render after state change in vuex? - Stack Overflow

admin管理员组

文章数量:1405919

Recently I picked up on vue and its redux counterpart vuex. But for some reason changes in state in vuex aren't triggering reactive updates to the view in a vue ponent.

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) {
            contextmit('ADD_BOOK', book);
        }
    },
    getters: {
        books: state => {return state.user.books}
    }
})

In my vue ponent:

<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.
        }
    },
    puted: {
        books () {
            return this.$store.getters.user.books;
        }
    }
}

I am accessing vuex store's books via puted and after I submit the form data, from vuejs developer tool extension, I see the changes in vuex as well as ponent's puted property. But I don't see the view getting updated after I submit. Any idea what I am missing here?

Recently I picked up on vue and its redux counterpart vuex. But for some reason changes in state in vuex aren't triggering reactive updates to the view in a vue ponent.

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.mit('ADD_BOOK', book);
        }
    },
    getters: {
        books: state => {return state.user.books}
    }
})

In my vue ponent:

<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.
        }
    },
    puted: {
        books () {
            return this.$store.getters.user.books;
        }
    }
}

I am accessing vuex store's books via puted and after I submit the form data, from vuejs developer tool extension, I see the changes in vuex as well as ponent's puted property. But I don't see the view getting updated after I submit. Any idea what I am missing here?

• javascript
• vue.js

Share Improve this question Follow edited Aug 4, 2021 at 0:10 jasonandmonte 2,03822 gold badges1818 silver badges2626 bronze badges asked Oct 13, 2019 at 18:14 夢のの夢夢のの夢 5,8961111 gold badges4343 silver badges7171 bronze badges 1

• When I ran your code it all seemed to work fine for me. The only thing I had to fix was the missing mas between the properties in your data. – skirtle Commented Oct 13, 2019 at 18:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The issue is in the puted property. It should be:

puted: {
 books () {
   return this.$store.getters.books;
 }       
}

For ease you can use vuex mapGetters:

import { mapGetters } from 'vuex'

export default {
  //..
  puted: {
    ...mapGetters(['books'])
  }
}

To do this you need to watch

Please note this example:

methods: {
...
},
puted: {
    books () {
        return this.$store.getters.books;
    }      
},
watch: {
    books(newVal, oldVal) {
        console.log('change books value and this new value is:' + newVal + ' and old value is ' + oldVal)
    }
}

now you can re-render your ponent

<template>
    <div :key="parentKey">{{books}}</div>
</template>
data() {
    return {
        parentKey: 'first'
    }
}

just you need to change parentKey on watch

watch: {
    books(newVal, oldVal) {
        this.parentKey = Math.random()
    }
}

本文标签： javascriptVue component39s view doesn39t rerender after state change in vuexStack Overflow