Vue - Как получить доступ к свойству компонента из Vuex

Question

В своем приложении я использую Vuex для выполнения асин c задач. В этом случае я использую его для входа пользователя в мое приложение. Когда пользователь вошел в систему и выполняется ax ios .then (), я хочу сообщить компоненту, из которого я это вызвал. $ 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 (), я хочу как-то изменить свойство test в моем компоненте на true. Может ли кто-нибудь помочь мне с этим?

Answer 1

Весь смысл наличия магазина Vuex не в том, чтобы менять реквизиты / данные вашего компонента. Вместо этого вы должны хранить данные в Vuex и прослушивать изменения / обновления в компоненте. Итак, при входе в систему вы должны иметь что-то вроде:

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

, а затем в компоненте:

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

Answer 2

Вы можете вернуть Promise из действия vuex:

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*/);

Answer 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')
            });
    },
}