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

Question

[vetsmen]

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 в вычисляемом методе прекрасно отрабатывает.

Answer 1

[Nikita Velko]

methods: {
  logout() {
    localStorage.removeItem('token');
    this.$store.commit('changeUserData', {});
    this.$store.commit('changeAuth', false);
  }
}

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

Из документации:

Стрелочные функции не создают собственный контекст this, а используют значение this окружающего контекста.

Comments

[vetsmen]

Можешь подсказать, почему в моем случае это не работало?

[Nikita Velko]

vetsmen, дополнил ответ.

[vetsmen]

Nikita Velko, спасибо. И такой момент, есть mounted() и есть methods: {}, мне в обоих нужно использовать один и тот же кусок кода. Как я могу его вынести в какую-либо функцию во Vue и использовать в компоненте везде, где захочу?

[Nikita Velko]

Если этот код повторяется только в одном компоненте, то вынесите его в отдельный метод и используйте его и в mounted() и в других методах компонента.
Примерно так:

methods: {
  performLogoutCommits() {
    this.$store.commit('changeUserData', {});
    this.$store.commit('changeAuth', false);
  },
  logout() {
    this.performLogoutCommits();
  },
},
mounted() {
  this.performLogoutCommits();
},

Если какой-то кусок кода повторяется между несколькими компонентами, то выносите его в отдельный файл куда-нибудь в папочку helpers, например, и импортируйте его в компоненты.