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

【问题标题】：How in store object to get access to parent vue page?如何在存储对象中访问父 vue 页面？
【发布时间】：2020-06-04 10:59:43
【问题描述】：

在我的 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 ?

谢谢！

【问题讨论】：

标签： vue.js vuejs2 vuex vee-validate

【解决方案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)
    });
}

【讨论】：

【解决方案2】：

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

【讨论】：