亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 vuex 中狀態更改后,Vue 組件的視圖不會重新渲染?

在 vuex 中狀態更改后,Vue 組件的視圖不會重新渲染?

元芳怎么了 2021-11-18 20:53:33
最近我開始學習 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 以及組件的計算屬性的變化。但是我在提交后沒有看到視圖得到更新。知道我在這里缺少什么嗎?
查看完整描述

2 回答

?
MM們

TA貢獻1886條經驗 獲得超2個贊

問題出在computed物業上。它應該是:


computed: {

 books () {

   return this.$store.getters.books;

 }       

}

為方便起見,您可以使用vuex mapGetters:


import { mapGetters } from 'vuex'


export default {

  //..

  computed: {

    ...mapGetters(['books'])

  }

}


查看完整回答
反對 回復 2021-11-18
?
慕田峪7331174

TA貢獻1828條經驗 獲得超13個贊

為此,您需要觀看


請注意這個例子:


methods: {

...

},

computed: {

    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)

    }

}

現在你可以重新渲染你的組件


<template>

    <div :key="parentKey">{{books}}</div>

</template>

data() {

    return {

        parentKey: 'first'

    }

}

只是你需要parentKey在手表上改變


watch: {

    books(newVal, oldVal) {

        this.parentKey = Math.random()

    }

}


查看完整回答
反對 回復 2021-11-18
  • 2 回答
  • 0 關注
  • 142 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號