尝试使用 Vuex getter 检索一个元素时出错

Question

我正在使用 Vue/Vuex/Vue-router 创建一个单页应用程序。

基本上我试图从显示的列表中选择一条记录后检索它，我的商店基本上包括：

export const store = new Vuex.Store({
  state: {
    reports: null,
    loading: false,
    reportProcessing: false
  },
  getters: {
    getReports (state) {
      return state.reports
    },
    getReport (state) {
      return (id) => {
        return state.reports.find((item) => {
          return item.id === id
        })
      }
    }
  }
  // ...

当我尝试使用它时

data () {
  return {
    // Attempt to load the report by passing the current id
    report: JSON.parse(JSON.stringify(this.$store.getters.getReport(this.id))),
// ...

它显示"SyntaxError: Unexpected token u in JSON at position 0" 的错误基本上返回一个空/空对象，这确实令人困惑，因为它有效（从对象列表中选择第一个元素）：

JSON.parse(JSON.stringify(this.$store.getters.getReports[0])),

所以我知道对象列表包含报告（并且 getter 似乎运行正常）。但是，当尝试像 this.$store.getters.getReport(1) 那样手动传递 id 时，它不起作用。

我到底做错了什么？

编辑： 我当前的路由器文件设置为（用于单个报告路由）

{
  path: '/report/:id',
  props: true,
  component: MainLayout,
  children: [
    { path: '', name: 'edit_report', component: EditReport }
  ]
}

基本上，我使用 vue-router 的子路由将组件加载到具有主菜单的布局中，但是当我为该路由删除此功能时：

{
  path: '/report/:id',
  name: 'edit_report',
  props: true,
  component: EditReport
}

它起作用了（显然没有被加载到主布局中），不用说这不是一个修复（因为我仍然需要它像所有其他页面一样加载到主布局中），但也许它有一些关系我做错了什么？

Answer 1

您正在使用不存在的this.id。 getReports() getter 中的 .find() 将返回 undefined，而 JSON.parse() 将抛出该错误。

这是JSON.parse(JSON.stringify(this.$store.getters.getReport(this.id))) 的细分，this.id 等于 6：

• this.$store.getters.getReport(6) 返回undefined
• JSON.stringify(undefined) 返回undefined
• JSON.parse(undefined) 抛出 Uncaught SyntaxError: Unexpected token u in JSON at position 0 错误。

下面的演示。

const store = new Vuex.Store({
  strict: true,
  state: {
    reports: [{id: 1}, {id: 2}],
    loading: false,
    reportProcessing: false
  },
  getters: {
    getReports (state) {
      return state.reports
    },
    getReport (state) {
      return (id) => {
        return state.reports.find((item) => {
          return item.id === id
        })
      }
    }
  }
});
new Vue({
  store,
  el: '#app',
  computed: {
    reports: function() {
      return this.$store.state.reports
    },
  },
  methods: {
    callGetReport() {
      console.log(this.$store.getters.getReport(6));
      console.log(JSON.stringify(this.$store.getters.getReport(6)));
      console.log(JSON.parse(JSON.stringify(this.$store.getters.getReport(6))));
    }
  }
})

<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>Reports: {{ reports }}</p>
  <button @click="callGetReport">Click here to call getReport() - open browser's console to see result</button>
</div>

将道具传递给子（嵌套）路线

您没有在嵌套路由中获得id，因为props 未打开：

{
  path: '/report/:id',
  props: true,
  component: MainLayout,
  children: [
    { path: '', name: 'edit_report', component: EditReport, props: true }
                                                       // ^^^^^^^^^^^^^ ------ added this
  ]
}