Question

我想在vue.js应用程序中为axios post操作动态创建URL路径

这是动作：

editProduct: function ({dispatch, commit}, payload) {
  axios
    .put('http://localhost:8081/product/5b5ca691e4f0d93c18e3f6d9', payload)
    .then(res => dispatch('loadProducts', res.data))
    .catch(function (error) {
      console.log(error)
    })
    .then(() => {
      commit('clearAddEditProduct')
    })
}

我想用当前状态替换“ 5b5ca691e4f0d93c18e3f6d9”

state: { // data
product: {
  name: '',
  description: '',
  externalid: '',
  active: '',
  id: ''
}

具体是产品ID

有什么建议吗？

Answer 1

使用传递给您操作的上下文中的protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().requestFeature(Window.FEATURE_ACTION_BAR); setContentView(R.layout.activity_search_resturant_listing_x); mSearchView = (SearchView) findViewById(R.id.search_view); listView = (ListView) findViewById(R.id.list_view); controller = new ResturantsDbHelper(this); userList = new ArrayList<>(); Cursor resturantdata = controller.getResturantList(); int numRows =resturantdata.getCount(); if (numRows == 0){ Toast.makeText(SearchResturantListingX.this,"No Resturants matching your selection criteria",Toast.LENGTH_LONG).show(); } else{ while (resturantdata.moveToNext()){ user = new User(resturantdata.getString(1),resturantdata.getString(2),resturantdata.getString(3),resturantdata.getString(4),resturantdata.getString(5)); userList.add(user); } adapter = new FiveColumn_ListAdapter(this,R.layout.activity_search_main3_resturant_list,userList); listView.setAdapter(adapter); } listView.setTextFilterEnabled(true); setupSearchView(); } private void setupSearchView() { mSearchView.setIconifiedByDefault(false); mSearchView.setOnQueryTextListener(this); mSearchView.setSubmitButtonEnabled(true); mSearchView.setQueryHint("Search Here"); } @Override public boolean onQueryTextSubmit(String query) { return false; } @Override public boolean onQueryTextChange(String newText) { if (TextUtils.isEmpty(newText)) { listView.clearTextFilter(); } else { listView.setFilterText(newText.toString()); } return false; }。

例如

state

请参见https://vuex.vuejs.org/guide/actions.html，尤其要注意Composing Actions部分。

请注意，我正在使用template literal来格式化URL字符串。这相当于

editProduct: function ({dispatch, commit, state}, payload) {
  // note the return below. This lets you compose actions
  return axios
    .put(`http://localhost:8081/product/${encodeURIComponent(state.product.id)}`, payload)
     // etc

Vue Axios动态网址

1 个答案: