Es6 写法

2019-12-08  本文已影响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
 } 
上一篇 下一篇

猜你喜欢

热点阅读