Vue - 如何从 Vuex 访问组件的属性答案

【问题标题】：Vue - How to access component's property from VuexVue - 如何从 Vuex 访问组件的属性
【发布时间】：2020-05-01 15:01:28
【问题描述】：

在我的应用程序中，我使用 Vuex 来执行异步任务。在这种情况下，我使用它将用户登录到我的应用程序。当用户登录并且 axios.then() 正在执行时，我想通知我调用 this.$store.dispatch('login', {username: userObj.username, password: userObj.password}); 的组件我的组件：


    data() {
        test: false
    },

    methods: {

        login() {
            const userObj = {
                username: this.username,
                password: this.password
            };
            console.log(userObj);
            this.$store.dispatch('login',
                {
                    username: userObj.username, password: userObj.password
                });
        }
    },

Vuex：

const actions = {
    login({ commit }, authData) {
        axios.post('/login', {
            username: authData.username,
            password: authData.password
        })
            .then(resp => {
                console.log(resp);
                localStorage.setItem('token', resp.data.authToken);
                localStorage.setItem('userId', resp.data.id);
                localStorage.setItem('user', resp.data);
                commit('storeUser', resp.data);
                router.replace('/dashboard');
            })
            .catch(e => {
                console.log(e);
                alert('Something went wrong, try again')
            });
    },
}

在这里，在 .then() 方法中，我想以某种方式将组件中的测试属性更改为 true。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

您可以从 vuex 操作返回 Promise：

const actions = {
    login({ commit }, authData) {
        return new Promise((resolve, reject) => {
            axios.post('/login', {
                username: authData.username,
                password: authData.password
            })
                .then(resp => {
                    console.log(resp);
                    localStorage.setItem('token', resp.data.authToken);
                    localStorage.setItem('userId', resp.data.id);
                    localStorage.setItem('user', resp.data);
                    commit('storeUser', resp.data);
                    router.replace('/dashboard');
                    resolve(resp);
                })
                .catch(e => {
                    console.log(e);
                    alert('Something went wrong, try again')
                    reject(e);
                });
        })
    },
}

当您调度操作时，您可以将其视为Promise（因为返回值是Promise）：

// inside your component
this.
  $store.
  dispatch('login', {username: userObj.username, password: userObj.password})
  .then(resp => { /* do something with axios response using component data and methods*/);

【讨论】：

【解决方案2】：

拥有 Vuex 存储的全部意义在于不更改组件的 props/data。相反，您应该将数据存储在 Vuex 中并监听组件中的更改/更新。因此，在您的登录操作中，您应该有类似的内容：

// Commit the changes to the store
commit('storeTest', true);

然后，在组件中：

computed: {
    // Get the value from the store
    test: () => {
        return this.$store.test;
    }
},

【讨论】：

vuex 的真正意义在于建立一个集中的数据存储/应用程序状态管理系统。 OP 只想响应组件内 vuex 操作的事件，他不一定要从 vuex 操作组件。

【解决方案3】：

Vuex 动作是可操作的，所以基本上你在组件中的动作调度应该是这样的：

this.$store.dispatch('login', { username: userObj.username, password: userObj.password }).then(res => {
// response handling
});

此外，您的操作必须返回响应才能使其正常工作。

const actions = {
    login({ commit }, authData) {
        axios.post('/login', {
            username: authData.username,
            password: authData.password
        })
            .then(resp => {
                console.log(resp);
                localStorage.setItem('token', resp.data.authToken);
                localStorage.setItem('userId', resp.data.id);
                localStorage.setItem('user', resp.data);
                commit('storeUser', resp.data);
                router.replace('/dashboard');
                return resp
            })
            .catch(e => {
                console.log(e);
                alert('Something went wrong, try again')
            });
    },
}

【讨论】：