最近，我了解了vue及其与之相对应的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.books;
}
}
}
通过computedvuejs开发人员工具扩展提交表单数据后，我正在访问vuex商店的书，我看到了vuex以及组件的计算属性的变化。但是提交后，我看不到视图更新。知道我在这里缺少什么吗？
问题出在computed酒店。它应该是：
computed: {
books () {
return this.$store.getters.books;
}
}
为方便起见，您可以使用vuex mapGetters：
import { mapGetters } from 'vuex'
export default {
//..
computed: {
...mapGetters(['books'])
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句