Can someone help me figure out how to create a getter in Vuex store with flat data from the Google Docs API? My goal is to extract the textRun content and store it in an array because there will be multiple messages. Currently, I have hard coded this response in the state like this:
state: {
googleResponse: [
{
"body": {
"content": [
{
"endIndex": 75,
"paragraph": {
"elements": [
{
"endIndex": 75,
"startIndex": 1,
"textRun": {
"content": "This is an ordinary paragraph. It is the first paragraph of the document",
"textStyle": {}
}
}
],
"paragraphStyle": {
"direction": "LEFT_TO_RIGHT",
"namedStyleType": "NORMAL_TEXT"
}
},
"startIndex": 1
},
{
"endIndex": 102,
"paragraph": {
"elements": [
{
"endIndex": 102,
"startIndex": 75,
"textRun": {
"content": "Here's a level one heading",
"textStyle": {}
}
}
],
"paragraphStyle": {
"direction": "LEFT_TO_RIGHT",
"headingId": "h.o1fkftgl5zwf",
"namedStyleType": "HEADING_1"
}
},
"startIndex": 75
},
]
}
}
],
}
After that, I created a getter message and used the map function from lodash:
message: (state) => {
let message = '';
map(state.googleResponse, (element) => ({
content: map(element.body.content, (content) => {
map(content.paragraph.elements, (obj) => {
message += get(obj, 'textRun', '')
})
})
}))
}
However, when I check the message in Vuex, it shows as undefined. I want to have an array with textRun objects. What could be causing this issue?