從Vuex Action將Axios提取的數據分配給Vuex State

Question

根據Axios 文檔 ，我在Vuex存儲的actions中同時從支持的（ block.json和type.json ）獲取兩個數據源。 在我的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