vuejs中使用（...）对象扩展运算符报错？

Question

 import  {getTodos} from '../store/actions'
    import  {mapState, mapActions} from 'vuex'
    export default{
        name: 'VuexDemo',
        data(){
            return {
                msg: 'VuexDemo'
            }
        },
        computed: mapState({
            count: state => state.todo.length
        }),
        methods: {
            ...mapActions(['getTodos'])
        },
        created(){
            this.getTodos()
            console.log(this.count)
        }
    }
    

然后就报错了。。...是非法字符。。

Module build failed: SyntaxError: D:/01workspace/GitHub/mint-demo/src/components/Vuexdemo.vue: Unexpected token (30:8)

  28 |     }),
  29 |     methods: {
> 30 |         ...mapActions(['getTodos'])
     |         ^
  31 |     },
  32 |     created(){
  33 |         this.getTodos()

package.json 部分

"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-3": "^6.17.0",
"babel-runtime": "^6.20.0"

.babelrc

{
  "presets": [
    [
      "es2015",
      "stage-3"
    ]
  ],
  "plugins": [
    "transform-runtime"
  ]
}

Answer 1

是不是 babel 的配置有问题，只用 stage-3 试试。

Answer 2

对象展开运算符报错时需要安装一个插件： npm install --save-dev babel-plugin-transform-object-rest-spread
在.babelrc文件中配置： {"plugins":["transform-object-rest-spread"]}
转自：https://www.aliyun.com/jiaoch...

Answer 3

https://segmentfault.com/a/11...

Answer 4

尝试给方法调用加括号看一下，或许是运算符优先级的问题。

Answer 5

写上stage-3就行了 ，我之前也不行

Answer 6

你可以参考下ES6的语法，使用扩展运算符的时候，前面必须要有内容的，所以你这样写会报错。

对象扩展运算符使用的场景是methods里面有其他方法，所以你可以这样写：

1、methods里没有其他方法

methods: mapActions(['getTodos']),

2、methods里有其他方法

methods: {
    func:()=>{},
    ...mapActions(['getTodos'])
}