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
}
网友评论