配置问题
浏览器只支持JavaScript语法,所以我们需要在项目中配置babel,在打包的时候进行转换,否则会报错;
1.将es6转es5
npm i --save-dev babel-preset-es2015
2.一些es7语法,上面的插件还是没法进行转化,需要安装插件object-rest-spread
npm i babel-plugin-transform-object-rest-spread --save-dev
有反应说打包后体积过大的,推荐
安装stage-3:npm install --save-dev babel-preset-stage-3
.babelrc中设置"presets": ["env","stage-3"],
3.安装完,在.babelrc文件进行配置
{
"presets": ["es2015"],
"plugins": ["transform-object-rest-spread"]
}
辅助函数
1.引入
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
2.使用
辅助函数其实是对vuex中的内容再做一次映射,来减少我们繁琐的引用,总是this.$store.state.xx去引入变量和dispath等去调用方法
mapState和mapGetters在computed中引入
mapAction和mapMutation在methods中引入
computed: {
...mapState(['count']) /*映射同名的对象:count */
...mapState({
counter: 'count' /*映射不同名字的对象:count--->counter */
})
...mapState({
counter: (state) => state.count /*映射不同名字的对象:count--->counter */
})
...mapGetters(["fullName",'count'])
}
methods:{
/*将actions,mutations里面的方法映射到对应的methods,以便在组件里面可以直接应用*/
//将this.$store.dispatch('ActionsFuncName')直接映射为this.ActionsFuncName()
...mapActions(['ActionsFuncName'])
//将this.$store.commit('MutationsFuncName')直接映射为this.MutationsFuncName()
...mapMutations(['MutationsFuncName'])
}
参考文件:
1.如何使用babel进行es6文件的编译
2.如何区分Babel中的stage-0,stage-1,stage-2以及stage-3(一)
网友评论