Как установить значение в компоненте из ajax-запроса к параметрам при создании в Vue?

Question

Я изучаю Vue и пытаюсь установить одно значение в компоненте во время его создания из одного Ajax-запроса.

Вот структура папки src:

src
    assets
    components
        Management.vue
    router
        index.js
    vuex
        modules
            caseSuiteList.js
        index.js
        actions.js
        getters.js
    App.vue
    main.js

Management.vue:

<template>
</template>
<script>
  import {mapState} from 'vuex'
  import store from 'vuex'
    export default {
      name: "Management",
      computed: mapState({
        suite_list: state => state.caseSuiteList.suite_list
      }),
      created(){
        store.dispatch('refresh')
      }
    }
</script>

caseSuiteList.js:

import axios from 'axios'

const state = {
  suite_list : {}
}

const mutations = {
  refreshSuiteList(state, payload) {
    state.suite_list = payload
  }
}

const actions = {
  refresh (context) {
    axios.get('http://127.0.0.1:8601/haha').then(function(res){
      console.log(res.data);
      context.commit('refreshSuiteList', res.data);
    }
    });
  }
}

export default {
  state,
  mutations,
  actions
}

Как отправить action из caseSuiteList.js в created() из Management.vue, чтобы это произошло?

Answer 1

Попробуйте отправить в созданный хук вашего компонента.

created() {
    this.$store.dispatch('refresh');
  }

Больше информации о Vuex: https://vuex.vuejs.org/guide/actions.html

Answer 2

Внутри экземпляра vue (или любого компонента внутри) вы получаете доступ к хранилищу с помощью this.$store.