美文网首页
Es6 写法

Es6 写法

作者: 幻影翔 | 来源:发表于2019-12-08 15:46 被阅读0次

    1、解构赋值

    import { mapState } from 'vuex' 
    等价于
    import vuex from 'vuex'
    const mapState = vuex.mapState
    

    2、简写

    当AInput: AInput时
    简写为AInput
    

    3、...mapState 展开操作符

    computed: {
      appName (){
          return this.$store.state.appName
      }
      // 或者使用(数组形式)
      ...mapState([
        'appName'
      ])
     // 或者使用(对象形式)
     ...mapState({
        appName: state => state.appName
      })
    // 指定模块(modules下的自定义state,前提是开启命名空间 namespaced=true)
    ...mapState('user',{
      userName: state => state.userName
    })
    }
    

    4、箭头函数

    一个参数时  to => {}  省略()
    直接返回时  state => state.appName 省略return
    

    5、命名空间

    //user.js中设置了 namespaced: true
    export default  {
        namespaced: true,
        state,
        mutations,
        actions
    }
    使用时
    import {createNamespacedHelpers} from 'vuex'
    const { mapState } = createNamespacedHelpers('user')  //指定模块
    ...mapState({
      userName: state => state.userName// 这里不需要指定模块名  state => state.user.userName
    })
    

    6、模板语法

    state.appName + 'v2.0'
    等价于
    `${state.appName}v2.0`
    

    7、导出

    export default state => {
     //
    }
    等价于
    export const saveInLocal = state => {
      //
    }
    // 使用时
    import saveInLocal from './plugin/saveInLocal'
    

    8、结构参数

    constructor (baseUrl = baseURL){
         this.baseUrl = baseUrl
     } 
    等价于
     constructor (baseUrl ){
         baseUrl = baseUrl || baseURL
         this.baseUrl = baseUrl
     } 
    

    相关文章

      网友评论

          本文标题:Es6 写法

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