如何将具有特定 ID 的数据传递给后端路由参数？

Question

我想 post 使用当前 ID 向后端路由参数发送消息。如何让系统知道我正在传递此 ID？

Vuex 动作：

postMessage({commit}, payload, id) {
  axios.post(`http://localhost:5000/channels/${id}/messages` ,payload)
    .then((res) => {
      commit(SET_POSTS, res.data)
    })
}

这是 post 操作，但我需要以某种方式传递当前频道 ID。但是频道ID在不同的组件中？

postMessage() {
  const postData = {
    description: this.description,
    timestamp: this.timestamp
  };
  this.$store.dispatch("postMessage", postData)
},

在另一个组件中，我的侧面菜单中有一个频道列表，例如 discord，我这样显示它

 p.d-flex.align-items-center.channel-item(v-for="channel in channelName" :key="channel.id")
      strong.hash.mr-3 #
      | {{channel.channel_name}}

Answer 1

Vuex 的主要好处之一是能够在一个组件中设置状态并从另一个组件获取状态。在另一个组件中，设置一些状态，如 state.id。然后您可以将该 id 传递给操作，或者从操作中的 state 获取它。

这是一个传递它的例子：

方法

postMessage() {
  const postData = {
    id: this.$store.state.id,
    description: this.description,
    timestamp: this.timestamp
  };
  this.$store.dispatch("postMessage", postData)
}

Vuex 动作始终只提供 2 个参数，一个用于上下文对象（包含 commit、dispatch 等）和有效负载。将您的操作更改为：

动作

postMessage({ commit }, payload) {
  axios.post(`http://localhost:5000/channels/${payload.id}/messages`, payload)
    .then((res) => {
      commit(SET_POSTS, res.data)
    })
}

如果您愿意，可以destructure the payload argument and use the spread operator将id与其余部分分开：

动作

postMessage({ commit }, { id, ...payload }) {
  axios.post(`http://localhost:5000/channels/${id}/messages`, payload)
    .then((res) => {
      commit(SET_POSTS, res.data)
    })
}

您也可以将 id 留在负载之外，直接从操作中的状态中获取：

动作

postMessage({ state, commit }, payload) {
  axios.post(`http://localhost:5000/channels/${state.id}/messages`, payload)
    .then((res) => {
      commit(SET_POSTS, res.data)
    })
}

如何将具有特定 ID 的数据传递给后端路由参数？

How to pass data with specific ID to backend route param?

javascript

vue.js

vue-component

vuex

vuejs2