VUE 2.0 - 无法通过 $router.push 获取道具 ID 到详细信息页面

Question

我有一个工作正常的工单列表（公司工单），单击时..它会打开该特定工单的详细信息页面（公司工单），并将 ID 传递给组件。

问题是我无法找到如何在创建的事件中访问此道具参数，因为它无法通过 "this" 访问。

companytickets.vue :

            viewTicket: function(ticket){
            this.$router.push('/companyticket/' + ticket.Id)
            // works : this redirects to http://localhost:8180/companyticket/3
        }

companyticket.vue

export default {
  name: 'CompanyTicket',
  props: {
    id: {
      type: Number,
      required: true
      }
  },
  created() {
    this.$store.dispatch('getCompanyTicket', this.id)
    // ERROR : this.id is undefined...
    console.log("Created here :")
  }
}

路由配置

{ path: '/companyticket/:id', component: CompanyTicket, props: true }

场景

this.id 是 "undefined"
当使用 this.$route.params.id 时，我得到了正确的 id 参数，但它以某种奇怪的方式声称使用 "companytickets/2"（这是父页面）。正确的应该是 companyticket/2.

Chrome 开发人员的屏幕截图：

Answer 1

使用 object-style 或 payload 将参数传递给操作。变化：

this.$store.dispatch('getCompanyTicket', this.id)

收件人：

this.$store.dispatch("getCompanyTicket", {
    id: this.id 
})

现在您的文件如下所示：

companyticket.vue

created() {
    this.$store.dispatch("getCompanyTicket", {
        id: this.id 
    })       
  }

store.js

  actions: {
    getCompanyTicket({ commit }, { id })  {         
        console.log("ID is available now-->", id)
    }
  }

Vuex

由于您使用的是 Vuex 状态管理模式，这将是另一种在组件之间共享数据的方法。它允许 parent-child 通信，child-parent 也是如此（ 与 props 共享数据仅允许 parent-child 通信 ）。将商店注入您的根组件：

const app = new Vue({
  el: '#app',
  // provide the store using the "store" option.
  // this will inject the store instance to all child components.
  store,
})

这是您商店对象中需要的一切：

var store = new Vuex.Store({
    state: {
        ticketID: Number
    },
    mutations: {
        UPDATE_TICKET_ID(state, ticketId) {
            state.ticketId = ticketId;
        }
    },
    actions: {
        getCompanyTicket({ commit, state }, { id })  {         
            commit("UPDATE_TICKET_ID", id)
        }
    }
}

另外如果你想更新状态：

The only way to actually change state in a Vuex store is by committing a mutation

来自州的任何属性将在每个组件中可用：

console.log(this.$store.state.ticketId)

VUE 2.0 - 无法通过 $router.push 获取道具 ID 到详细信息页面

VUE 2.0 - Unable to get props id through $router.push to details page

javascript

ecmascript-6

vuejs2

Vuex