Error when attempting to retrieve one element using Vuex getter - vue.js

Question

I'm creating a single page app using Vue/Vuex/Vue-router.
Basically I'm trying to retrieve one record after selecting it from a shown list, my store consists of basically:
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
})
}
}
}
// ...
When I try to use it with
data () {
return {
// Attempt to load the report by passing the current id
report: JSON.parse(JSON.stringify(this.$store.getters.getReport(this.id))),
// ...
It shows an error for "SyntaxError: Unexpected token u in JSON at position 0" basically returns a null/empty object, which is really confusing because this works (selecting the first element from the object list) :
JSON.parse(JSON.stringify(this.$store.getters.getReports[0])),
So I know the object list contains the reports (and that the getters seem to run properly). It doesn't work however when attempting to pass the id manually like this.$store.getters.getReport(1)
Exactly what am I doing wrong here?
EDIT :
My current router file is set to (for the single report route)
{
path: '/report/:id',
props: true,
component: MainLayout,
children: [
{ path: '', name: 'edit_report', component: EditReport }
]
}
Basically I'm using vue-router's child routes to load the components inside a layout that has the main menu, however when I removed this function for that route to :
{
path: '/report/:id',
name: 'edit_report',
props: true,
component: EditReport
}
It worked (obviously without being loaded inside the main layout), needless to say this isn't a fix (since i still need it to load inside the main layout like all the other pages), but maybe it has some relation to what I'm doing wrong?

Answer 1

You are using an this.id that does not exist. The .find() in the getReports() getter will return undefined and the JSON.parse() will throw that error.
Here's a breakdown of JSON.parse(JSON.stringify(this.$store.getters.getReport(this.id))), with this.id equal to 6:
this.$store.getters.getReport(6) returns undefined
JSON.stringify(undefined) returns undefined
JSON.parse(undefined) throws Uncaught SyntaxError: Unexpected token u in JSON at position 0 error.
Demo below.
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>
Passing props to child (nested) routes
You are not getting the id in the nested route because the props are not turned on:
{
path: '/report/:id',
props: true,
component: MainLayout,
children: [
{ path: '', name: 'edit_report', component: EditReport, props: true }
// ^^^^^^^^^^^^^ ------ added this
]
}