第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在 vuex 中狀態(tài)更改后,Vue 組件的視圖不會(huì)重新渲染?

在 vuex 中狀態(tài)更改后,Vue 組件的視圖不會(huì)重新渲染?

元芳怎么了 2021-11-18 20:53:33
最近我開(kāi)始學(xué)習(xí) vue 和它的 redux 對(duì)應(yīng)物 vuex。但是由于某種原因,vuex 中的狀態(tài)變化不會(huì)觸發(fā) vue 組件中視圖的反應(yīng)性更新。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;        }    }}我正在訪問(wèn) vuex 商店的書籍,computed并在我提交表單數(shù)據(jù)后,從 vuejs 開(kāi)發(fā)人員工具擴(kuò)展中,我看到 vuex 以及組件的計(jì)算屬性的變化。但是我在提交后沒(méi)有看到視圖得到更新。知道我在這里缺少什么嗎?
查看完整描述

2 回答

?
MM們

TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊

問(wèn)題出在computed物業(yè)上。它應(yīng)該是:


computed: {

 books () {

   return this.$store.getters.books;

 }       

}

為方便起見(jiàn),您可以使用vuex mapGetters:


import { mapGetters } from 'vuex'


export default {

  //..

  computed: {

    ...mapGetters(['books'])

  }

}


查看完整回答
反對(duì) 回復(fù) 2021-11-18
?
慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

為此,您需要觀看


請(qǐng)注意這個(gè)例子:


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)

    }

}

現(xiàn)在你可以重新渲染你的組件


<template>

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

</template>

data() {

    return {

        parentKey: 'first'

    }

}

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


watch: {

    books(newVal, oldVal) {

        this.parentKey = Math.random()

    }

}


查看完整回答
反對(duì) 回復(fù) 2021-11-18
  • 2 回答
  • 0 關(guān)注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)