尝试使用 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" 基本上 returns 一个 null/empty 对象的错误，这真的很令人困惑，因为它有效（从对象列表中选择第一个元素）：

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() 将 return undefined 而 JSON.parse() 将抛出该错误。

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

this.$store.getters.getReport(6) returns undefined
JSON.stringify(undefined) returns 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>

将 props 传递给子（嵌套）路由

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

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

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

Error when attempting to retrieve one element using Vuex getter

vue.js

vuejs2

single-page-application

vue-router

vuex

将 props 传递给子（嵌套）路由