how to have Vuex mapState with computed properties in vuejs - vue.js

Question

I'm trying to learn Vuex and tried adding the mapState with local computed property in my Vuejs 2.0 application on top of Laravel 5.4, now while adding so I'm getting following error:
Syntax Error: Unexpected token, expected , (379:32)
377 | },
378 | mapState({
> 379 | contactStore: state => state.contactStore
| ^
380 | })
381 | }
382 | }
Here is my component:
<template>
<div class="row">
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<th class="text-left">Contact Name</th>
<th class="text-left">Company Name</th>
<th class="text-left">City</th>
<th class="text-left">Email</th>
<th class="text-left">Mobile</th>
<th class="text-left">Type</th>
<th class="text-left">SubType</th>
<th class="text-left">Profile</th>
</tr>
<tr v-for="(item, index) in tableFilter">
<td class="text-left"><a #click="showModal(item)" data-toggle="modal" data-target="#showContactModal">{{ item.first_name+' '+item.last_name }}</a></td>
<td class="text-left">{{ item.company.name }}</td>
<td class="text-left">{{ item.city }}</td>
<td class="text-left">{{ item.email }}</td>
<td class="text-left">{{ item.mobile }}</td>
<td class="text-left"><span class="badge badge-info">{{ item.company.type }}</span></td>
<td class="text-left"><span class="badge badge-info">{{ item.company.sub_type }}</span></td>
<td class="text-left"><span class="badge badge-info">{{ item.profile }}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
data(){
return {
id: '',
search: '',
model: []
}
},
computed: {
tableFilter: function () {
const searchTerm = this.search.toLowerCase();
if(this.model)
{
return this.model.filter((item) =>
(item.first_name.toLowerCase().includes(searchTerm)
|| (item.last_name !==null && item.last_name.toLowerCase().includes(searchTerm))
|| (item.company.name !==null && item.company.name.toLowerCase().includes(searchTerm))
);
}
},
mapState({
contactStore: state => state.contactStore
})
}
}
</script>
I'm trying to replace table filter computed property with the current contact_list state, how can I achieve this or I'm doing some mistake, even if I do ...mapState({}) it is showing me same type of error:
Syntax Error: Unexpected token (378:8)
376 | }
377 | },
> 378 | ...mapState({
| ^
379 | contactStore: state => state.contactStore
380 | })
381 | }
what can be done guide me. Thanks

Answer 1

You are getting this error because the babel is not working on your vue file. The laravel-mix library should do this for you, but if you are manually configuring the file using a webpack.config.js file, you will have to attach a babel loader to the vue loader.
I answered this question on another thread... https://stackoverflow.com/a/49581031/1718887