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

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

Vue Mixin 屬性為空白/空/無反應(yīng)

Vue Mixin 屬性為空白/空/無反應(yīng)

浮云間 2022-01-07 13:14:54
我希望這個(gè)問題不是重復(fù)的。如果是這樣,請指出正確的方向。我有一個(gè)使用 Webpack@NPM 編譯的 Vue 應(yīng)用程序。我使用 mixinroles在所有組件中傳播一個(gè)屬性 ( )。我使用來自應(yīng)用實(shí)例化的 ajax 調(diào)用來更新它。問題roles只是<Root>組件的更新,而不是所有其他組件的更新。////////////////////////// app.js////////////////////////// importwindow.axios = require('axios')import Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes.js'// mixinVue.mixin({    data: function () {        return {            // property in question            roles: [],        }    },    methods: {        getRoles: function() { //////////// this method updates property.            // get            axios.get('/api/vcr/admin/roles')            // process            .then(response=>{                this.roles = response.data.data;            })            // error?            .catch(error=>{                this.toast(error.response.data.message);            })        },    },});// routerconst router = new VueRouter({    mode: 'history',    routes:  routes,});// appconst app = new Vue({    el: '#app',    components: { App: require('./views/App').default },    router,    base: '/saas/vcr/admin',    created: function() { ////////////// I update it here        this.getRoles();    }});//////////////////////////  Foo.vue////////////////////////<script>    export default {        mounted: function() {            console.log(this.roles) ////// returns an empty array        }    }</script>你知道如何做出roles反應(yīng)嗎?
查看完整描述

1 回答

?
慕慕森

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

您創(chuàng)建的全局 mixin 不會(huì)調(diào)用填充roles屬性的函數(shù),它依賴于繼承實(shí)例來執(zhí)行此操作。在您的app“根”實(shí)例中,您在created調(diào)用getRolesmixin的生命周期鉤子中執(zhí)行此操作,但在組件中Foo您沒有調(diào)用它,因此它將具有默認(rèn)的空值。該roles屬性不共享,每個(gè)組件都將獲得它自己的副本,并且需要填充。

您可以通過添加生命周期created掛鉤來更改 mixin 來為您執(zhí)行此操作,就像您在根實(shí)例中所做的那樣。這是一個(gè)例子。請注意,在混入中實(shí)現(xiàn)這一點(diǎn)不會(huì)阻止或覆蓋以后的生命周期鉤子在它合并到的實(shí)例上運(yùn)行。但是,在您的情況下,它會(huì)對創(chuàng)建的每個(gè)組件實(shí)例進(jìn)行 API 調(diào)用,這可能是不可取的。

如果您只想填充一次然后在所有組件之間共享它,那么使用 Vuex 并擁有一個(gè)roles集中填充并以反應(yīng)方式在所有組件之間共享的全局狀態(tài)可能更有意義。


查看完整回答
反對 回復(fù) 2022-01-07
  • 1 回答
  • 0 關(guān)注
  • 436 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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