配置問(wèn)題

瀏覽器只支持JavaScript語(yǔ)法，所以我們需要在項(xiàng)目中配置babel，在打包的時(shí)候進(jìn)行轉(zhuǎn)換，否則會(huì)報(bào)錯(cuò)；
1.將es6轉(zhuǎn)es5

npm i --save-dev babel-preset-es2015

2.一些es7語(yǔ)法，上面的插件還是沒(méi)法進(jìn)行轉(zhuǎn)化，需要安裝插件object-rest-spread

npm i babel-plugin-transform-object-rest-spread --save-dev

有反應(yīng)說(shuō)打包后體積過(guò)大的，推薦
安裝stage-3：npm install --save-dev babel-preset-stage-3
.babelrc中設(shè)置"presets": ["env","stage-3"],
3.安裝完，在.babelrc文件進(jìn)行配置

{
  "presets": ["es2015"],
  "plugins": ["transform-object-rest-spread"]
}

輔助函數(shù)

1.引入

 import { mapState,  mapGetters,  mapMutations,  mapActions } from 'vuex'

2.使用
輔助函數(shù)其實(shí)是對(duì)vuex中的內(nèi)容再做一次映射,來(lái)減少我們繁瑣的引用，總是this.$store.state.xx去引入變量和dispath等去調(diào)用方法

mapState和mapGetters在computed中引入
mapAction和mapMutation在methods中引入

computed: {
     ...mapState(['count']) /*映射同名的對(duì)象：count */
     ...mapState({
         counter: 'count' /*映射不同名字的對(duì)象：count--->counter */
     })
     ...mapState({
         counter: (state) => state.count /*映射不同名字的對(duì)象：count--->counter */
     })

     ...mapGetters(["fullName",'count'])
 }

 methods：{
     /*將actions，mutations里面的方法映射到對(duì)應(yīng)的methods,以便在組件里面可以直接應(yīng)用*/

//將this.$store.dispatch('ActionsFuncName')直接映射為this.ActionsFuncName()
     ...mapActions(['ActionsFuncName'])
//將this.$store.commit('MutationsFuncName')直接映射為this.MutationsFuncName()
     ...mapMutations(['MutationsFuncName'])
 }

參考文件：
1.如何使用babel進(jìn)行es6文件的編譯
2.如何區(qū)分Babel中的stage-0,stage-1,stage-2以及stage-3（一）