美文网首页随笔-生活工作点滴
vuex辅助函数mapState mapGetters mapA

vuex辅助函数mapState mapGetters mapA

作者: Kiki_Q | 来源:发表于2019-07-10 09:58 被阅读6次

配置问题

浏览器只支持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(一)

相关文章

网友评论

    本文标题:vuex辅助函数mapState mapGetters mapA

    本文链接:https://www.haomeiwen.com/subject/hdwehctx.html