Как вызвать метод в компоненте vue после загрузки начального состояния?

Question

[Nik1712]

Разбираюсь с vuex, столкнулся со следующей проблемой:
начальное состояние вызывается в computed, метод saveProfile вызывается по клику. Все работает, но хочется, чтоб saveProfile или действие, которое внутри - this.$store.dispatch('loadInfo') вызывалось сразу после того, как загружено начальное состояние. Не понимаю, как это сделать.

Фрагмент компонента:

<script>
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
import { mapActions } from 'vuex';
export default {
  name: 'profile',

  computed: mapState({
        user: state => state.user,
        checked: state => state.checked,
  }),
  methods: {
    saveProfile () {
      this.$store.dispatch('loadInfo');
    },
    selectGender (event) {
      const gender = event.target.value;
      this.$store.commit('chooseGender', gender);
    }
  }
}
</script>

и хранилище

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { GET_USER_INFO } from './mutation-types'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
		user: [],
		checked: 0
	},
	mutations: {
		[GET_USER_INFO](state) {
			axios.get('http://localhost:3000/user')
				.then((response) => {
					state.user = response.data;
					state.checked = state.user.gender;
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		chooseGender(state, gender) {
			state.checked = gender;
		}
	},
	actions: {
		loadInfo ({ commit }) {
			commit(GET_USER_INFO);
		}
	}
});

export default store;

Answer 1

[Дмитрий Беляев]

ну во-первых, mutations должны быть синхронными, запрос следует перенести в actions (в loadInfo), и оттуда уже коммитить полученные данные для запуска мутации состояния

загрузку начального состояния можно отследить через хуки жизненного цикла
https://ru.vuejs.org/v2/guide/instance.html#%D0%A5...
в Вашем случае думаю подойдет хук created

Answer 2

[0xD34F]

mutations: {
  [GET_USER_INFO](state) {
    axios.get('http://localhost:3000/user')
      ...

Ох ни хрена ж себе. Документацию-то читали?

хочется, чтоб saveProfile или действие, которое внутри - this.$store.dispatch('loadInfo') вызывалось сразу после того, как загружено начальное состояние

created

Answer 3

[Вадим]

Мутации – синхронные транзакции, то есть, как правило, самые простые изменения state (=, Object.assign(), Array.prototype.slice()), главное, что синхронные. Асинхронные операции, такие как axious.get, надо переместить в action, и уже внутри then() делать commit, а диспатчить сам action надо в created() компонента.

loadInfo ({ commit }) {
      commit(GET_USER_INFO);

– пустая обертка над мутацией, не имеет смысла.