Как в магазине объекта получить доступ к родительской vue странице? - PullRequest
Новая
       45

Как в магазине объекта получить доступ к родительской vue странице?

0 голосов
/ 20 февраля 2020

В моем приложении vue 2.6 / cli 4 / vuex 3.1 я обновляю некоторые данные в хранилище vuex, например, в src / store / index. js: 

userPropStore(context, userProp ) {
    bus.$emit( 'beforeUserPropStore', userProp );
    let apiUrl = process.env.VUE_APP_API_URL
    Vue.http.post(apiUrl + '/personal/user-props', userProp).then(({data}) => {
        let userProps= this.getters.userProps
        userProps.push({
            "id": data.user_props.id,
            "name": data.user_props.name,
            "value": data.user_props.value,
            "created_at": data.user_props.created_at,
        })
        this.commit('refreshUserProps', userProps);
        bus.$emit( 'onUserPropStoreSuccess', data );
    }, error => {
        console.log('context::')
        console.log(context)
        console.error(error)
        self.$refs.userObserverForm.setErrors(error.body.errors)
    });
}, // userPropStore(context, userProp ) {

и использую ValidationProvider of vee -validate 3.2 Я хочу поймать ошибки сервера (например, не уникальный элемент), но я получил ошибку: 

index.js?4360:847 Uncaught (in promise) TypeError: Cannot read property 'userObserverForm' of undefined

в строке 

self.$refs.userObserverForm.setErrors(error.body.errors)

Если в хранилище есть способ получить доступ к родительской странице, возможно с контекстом, который имеет: https://imgur.com/a/P4St8Ri?

Спасибо!

Ответы [ 2 ]

1 голос
/ 20 февраля 2020

Это очень странная реализация.

Очевидно, что self.$refs.userObserverForm.setErrors(error.body.errors) завершается ошибкой, потому что вы НЕ находитесь в компоненте, где $ refs доступен.

Что вы должны сделать в вашем Блок catch устанавливает ошибки в Vuex, а затем заставляет ваш компонент читать оттуда.

Псевдокод следует:

Я не понимаю, что делает ваша шина ... Я думаю, вы используйте его для отправки данных вашему компоненту, но зачем тогда использовать Vuex 

userPropStore(context, userProp ) {
    bus.$emit( 'beforeUserPropStore', userProp );
    let apiUrl = process.env.VUE_APP_API_URL
    Vue.http.post(apiUrl + '/personal/user-props', userProp).then(({data}) => {
        let userProps= this.getters.userProps
        userProps.push({
            "id": data.user_props.id,
            "name": data.user_props.name,
            "value": data.user_props.value,
            "created_at": data.user_props.created_at,
        })
        this.commit('refreshUserProps', userProps);
        bus.$emit( 'onUserPropStoreSuccess', data );
        commit('SET_USER_PROPS, data)
    }, error => {
        console.log('context::')
        console.log(context)
        console.error(error)
        commit('SET_USER_PROPS_ERRORS', error.body.errors)
    });
}
0 голосов
/ 20 февраля 2020

То, как я делал это в прошлом, - это возвращение обещания, которое выдает Vue.http.post, и затем выполнение того, что вы хотите в своем компоненте, с информацией об ошибках: 

userPropStore(context, userProp ) {
    bus.$emit( 'beforeUserPropStore', userProp );
    let apiUrl = process.env.VUE_APP_API_URL
    //add return to the line below
    return Vue.http.post(apiUrl + '/personal/user-props', userProp).then(({data}) => {

Затем в вашем компонент: 

loadData() {
    this.$store.dispatch('userPropStore').catch((error) => {
        this.$refs.userObserverForm.setErrors(error.body.errors)
        //any other things you want to do "in component" goes here
    });
}
...