如何在存储对象中访问父 vue 页面？

Question

在我的 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 ) {

并使用 vee-validate 3.2 的 ValidationProvider 我想捕获服务器错误（比如不是唯一项）但我得到了错误：

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 ？

谢谢！

Answer 1

这是一个非常奇怪的实现。

显然 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)
    });
}

Answer 2

我过去这样做的方法是 return 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
    });
}

如何在存储对象中访问父 vue 页面？

How in store object to get access to parent vue page?

vue.js

vuejs2

vuex

vee-validate