how to have Vuex mapState with computed properties in vuejs

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

It should be `...mapState({ contactStore: state => state.contactStore })`. If you've tried that, what error does it give you? — thanksd, Aug 09 '17 at 19:28
@thanksd Added the same in the question, please see the updated question. — Nitish Kumar, Aug 09 '17 at 19:31
Are you sure you have support for the spread operator `...`? Are you using babel? — thanksd, Aug 09 '17 at 19:33
Ok I got it, I need to have `npm install --save-dev babel-plugin-transform-object-rest-spread` and then create a `.babelrc` file in your project directory `{ "plugins": ["transform-object-rest-spread"] }` — Nitish Kumar, Aug 09 '17 at 19:40

score 0 · Answer 1 · answered Apr 02 '18 at 22:46

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

how to have Vuex mapState with computed properties in vuejs

1 Answers1