Question

我正在尝试学习Vuex并尝试在Vuejs 2.0的{{1}}应用程序中添加带有本地计算属性的mapState，现在添加时我得到了以下错误：

Laravel 5.4

这是我的组件：

Syntax Error: Unexpected token, expected , (379:32)

  377 |         },
  378 |         mapState({
> 379 |             contactStore: state => state.contactStore
      |                                 ^
  380 |         })
  381 |     }
  382 | }

我正在尝试用当前的contact_list状态替换表过滤器计算属性，如何实现这一点或者我犯了一些错误，即使我<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>它向我显示了相同类型的错误：

...mapState({})

可以做些什么来指导我。感谢

Answer 1

您收到此错误是因为babel没有处理您的vue文件。 laravel-mix库应该为您执行此操作，但如果您使用webpack.config.js文件手动配置文件，则必须将babel加载程序附加到vue加载程序。

我在另一个帖子上回答了这个问题...... https://stackoverflow.com/a/49581031/1718887

如何在vuejs中使用具有计算属性的Vuex mapState

1 个答案: