从Vuex Action将Axios提取的数据分配给Vuex State

Question

As per the Axios documentation , I concurrently fetch two data sources from my backed ( block.json and type.json ) within actions of my Vuex store. In my Vuex State, I declare myBlocks and myTypes as data. The data is fetched fine, but I cannot seem to assign the fetched data to the variables in the Vuex state. I seem to have troubles referencing the state, because console.log(state.sample) yields undefined rather than foo . However, console.log(state) yields the following as in the photograph below. Any leads would be great.

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

In your actions , you are not provided with state but context .

So you need to do as follows:

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;
        }));
    }

}

Reference: https://vuex.vuejs.org/guide/actions.html