Question

我正在使用vuex从vue组件中提取我的业务逻辑，以保持我的代码简洁明了。有时，您必须访问路由器之类的注册插件才能执行操作。但是不知何故，没有官方方法可以访问vuex存储中的vue实例。

想象一个简单的登录组件

/* Login.vue */

<template>
    <form @submit.prevent="login" method="post">
        <input type="email" v-model="email" required />
        <input type="password" v-model="password" required />
        <button type="submit">Sign in</button>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                email: null,
                password: null
            }
        },
        methods: {
            login() {
                this.$store.dispatch('auth/login', {
                    email: this.email,
                    password: this.password
                });
            }
        }
</script>

我希望业务逻辑由vuex存储区login中的动作auth处理。由于我使用了两个插件（例如websanova / vue-auth），因此需要访问vuex存储中的vue实例。在此示例中，我想在登录尝试成功后进行重定向。

/* auth.js */

export default new Vuex.Store({
    actions: {
        login(state, payload) {
            var app = this; // <-- ERROR: `this` does not contain $auth or $router
            app.$auth.login({
                data: payload,
                success: function(data) {
                    app.$router.push({name: 'welcome'});
                }
            });
        }
    }
});

如您所见，在vuex存储中无法访问vue实例，因此我无法访问$router或$auth来处理操作。

那么访问vuex存储中已注册的插件或整个vue实例的最佳方法是什么？

是否仅将vue实例作为参数传递给有效负载内？
或导出vue实例并将其导入vuex存储中？

我认为必须有更直接的方法来实现这一目标。

最佳实践-如何在vuex存储中访问vue实例？

0 个答案: