Присвоение извлеченных данных Axios состоянию Vuex из Vuex Action

Question

Согласно документации Axios , я одновременно получаю два источника данных из моих резервных копий (block.json и type.json) в actions моего магазина Vuex. В моем штате Vuex я объявляю myBlocks и myTypes как данные. Данные извлекаются нормально, но я не могу назначить извлеченные данные переменным в состоянии Vuex. Кажется, у меня проблемы со ссылками на состояние, потому что console.log(state.sample) дает undefined, а не foo. Однако console.log(state) дает следующее, как на фотографии ниже. Любые выводы будут великолепны.

state: {
  sample: 'foo',
  myBlocks: [],
  myTypes: []

},


actions: {
  fetchElementColors: function(state) {
      function getElementBlockColors() { return axios.get('/element-data/block.json'); }
      function getCategoryDataColors() { return axios.get('/element-data/type.json'); }

      axios.all([getElementBlockColors(), getCategoryDataColors()])
        .then(axios.spread(function(blockData, categoryData) {
          console.log(state);
          console.log(state.sample);
          state.myBlocks= blockData.data;
          state.myTypes= categoryData.data;
        }));
    }

}

Answer 1

В вашем actions вам не предоставляется state, но context.

Так что вам нужно сделать следующее:

actions: {
  fetchElementColors: function(context) {
      function getElementBlockColors() { return axios.get('/element-data/block.json'); }
      function getCategoryDataColors() { return axios.get('/element-data/type.json'); }

      axios.all([getElementBlockColors(), getCategoryDataColors()])
        .then(axios.spread(function(blockData, categoryData) {
          console.log(context.state);
          console.log(context.state.sample);
          context.state.myBlocks= blockData.data;
          context.state.myTypes= categoryData.data;
        }));
    }

}

Ссылка: https://vuex.vuejs.org/guide/actions.html