编辑：

Question

在我的store.js中，我有一个user_data州，其初始方法为fetch_user_data：

export default new Vuex.Store({
  state: {
    user_data: util.fetch_user_data('username')
    ...
  }

util.js中的

：

util.fetch_user_data = function(username){
   Lml_http('get', Api_urls.productconfig_common.user_data(username), null, response => {

    return response.data  // there get the data, in the debugger shows it.
  }, error => {

  })
}

但是当我使用state＆＃39; user_data时，它是undefined。

修改-1

我希望store.js使用fetch_util方法获取数据，并提交state。

修改-2

我的lml_http代码如下：

var lml_http = function (method, url, params, success_cb, error_cb, multipart_formdata=undefined) {

  var format_to_form_data = function(data){

    let formData = new FormData()
    for (let item in data) {
      formData.append(item, data[item])
    }
    return formData
  }

  var lowercase_method = method.toLowerCase()

  var formated_params = params

  var header_config = null

  if (multipart_formdata) {
    header_config = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }

    formated_params = format_to_form_data(formated_params)
  }

  if(lowercase_method === "get") {

    formated_params = {params: formated_params}

    if (!header_config) {

      Axios.get(url, formated_params).then(response => {
        success_cb(response)
        return
      }).catch(response => {
        error_cb(response)
        return
      })
    } else {
      Axios.get(url, format_to_form_data(formated_params), header_config).then(response => {
        success_cb(response)
        return
      }).catch(response => {
        error_cb(response)
        return
      })

    }

    return
  }
  else {


    if(!header_config) {

      Axios[method](url, formated_params).then(response => {
        success_cb(response)
      }).catch(response => {
        error_cb(response)
      })
      return
    }else {
      Axios[method](url, formated_params, header_config).then(response => {
        success_cb(response)
      }).catch( response => {
        error_cb(response)
      })
      return
    }

  }

}

Answer 1

只需创建一个操作来获取用户数据，如下所示：

export default new Vuex.Store({
  state: {
    user_data: null
  },
  mutations: {
    setUserData(state, data) {
      state.user_data = data;
    }
  },
  actions: {
    fetchUserData({ commit }, username) {
      Lml_http(
        "get",
        Api_urls.productconfig_common.user_data(username),
        null,
        response => {
          commit("setUserData", response.data);
        },
        error => {}
      );
    }
  }
});

然后在theroot vue实例的created()钩子中调度此操作

//main.js

new Vue({
  el: "#app",
  store,
  render: h => h(App),
  created() {
    this.$store.dispatch("fetchUserData", "username");
  }
});

`

编辑：

Axios默认返回Promise。所以在lml_http中返回Axios调用如下：

var lml_http = function(
  method,
  url,
  params,
  success_cb,
  error_cb,
  multipart_formdata = undefined
) {
  var format_to_form_data = function(data) {
    let formData = new FormData();
    for (let item in data) {
      formData.append(item, data[item]);
    }
    return formData;
  };

  var lowercase_method = method.toLowerCase();

  var formated_params = params;

  var header_config = null;

  if (multipart_formdata) {
    header_config = {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    };

    formated_params = format_to_form_data(formated_params);
  }

  if (lowercase_method === "get") {
    formated_params = { params: formated_params };

    if (!header_config) {
      return Axios.get(url, formated_params)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    } else {
      return Axios.get(url, format_to_form_data(formated_params), header_config)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    }
  } else {
    if (!header_config) {
      return Axios[method](url, formated_params)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    } else {
      return Axios[method](url, formated_params, header_config)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    }
  }
};

还在utils.js中添加一个return语句

util.fetch_user_data = function(username){
   return Lml_http('get', Api_urls.productconfig_common.user_data(username), null, response => {

    return response.data  // there get the data, in the debugger shows it.
  }, error => {

  })
}

现在开始行动fetchUserData

fetchUserData({ commit }) {
    util.fetch_user_data('username').then((
      commit("setUserData", response.data);
    });
}

在main.js中调度没有任何有效负载的动作

// main.js

new Vue({
  el: "#app",
  store,
  render: h => h(App),
  created() {
    this.$store.dispatch("fetchUserData", "username");
  }
});

Answer 2

因为fetch api是异步的，所以它将返回一个promise，而不是响应数据。我想你可以试试像：

const store = new Vuex.Store({
  state: {
  user_data: null,
  ...
};

util.fetch_user_data('username')
  .then(user => store.user_data = user);

export default store;

我想使用fetch API方法初始化商店的状态，但为什么它不起作用？

2 个答案:

编辑：