@vetsmen

Проблемы с доступом к Vuex через commit?

Component:
export default {
	name: 'main',
	computed: {
		isAuthenticated() {
			return this.$store.state.authenticated;
		}
    },
	mounted () {
		let token = localStorage.getItem('token');
		if(token) {
			HTTP.get('getUserData')
				.then(response => {
					this.$store.commit('changeUserData', response.data.data);
					this.$store.commit('changeAuth', true);
				})
				.catch(error => {
					console.log(error)
				})
		}
	},
	methods: {
		logout: () => {
			localStorage.removeItem('token');
			this.$store.commit('changeUserData', {});
			this.$store.commit('changeAuth', false);
		}
	}
}


Vuex:
export const store = new Vuex.Store({
	state: {
		userData: {},
		authenticated: false
	},
	mutations: {
		changeAuth (state, item) {
			state.authenticated = item;
		},
		changeUserData (state, payload) {
			state.userData = payload;
		}
	}
});


Однако получаю ошибку: Cannot read property 'commit' of undefined
В чем проблема? this.$store.state.authenticated в вычисляемом методе прекрасно отрабатывает.
  • Вопрос задан
  • 1654 просмотра
Решения вопроса 1
nikichv
@nikichv
Frontend dev. Current stack: Next.js/RTK/Saga
methods: {
  logout() {
    localStorage.removeItem('token');
    this.$store.commit('changeUserData', {});
    this.$store.commit('changeAuth', false);
  }
}

Если не заметили, что изменилось, то мы убрали стрелочную функцию и заменили ее на метод (короткий синтаксис es6). И собственно, после этой замены контекст this не будет теряться.
Было:
logout: () => {
Стало:
logout() {

Из документации:
Стрелочные функции не создают собственный контекст this, а используют значение this окружающего контекста.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы