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

Question

根据Axios documentation，我同时从我的Vuex存储的block.json中支持的type.json和actions中获取两个数据源。在我的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