@vue/composition-api尝试

前言

之所以使用@vue/composition-api而非直接使用v3,考虑到ui库目前能支持的都只是2.0的版本。

构建项目

vue-cli构建常规vue项目后

1
yarn add @vue/composition-api // 引包

在main.js中

1
2
3
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

注意点

  • 由于composition-api还在不断更新当中,所以有时候在我们更新完之后,在node_modules里面会产生两个@vue/composition-api的库,需要删除旧的才能正确引用,
    或者rm-rf node_modules删除掉node-modules后重新 install. 参考issue

小结

基本的在官方的网站上都有,这里就不多举例了。只列举一些常见但我自己没有找到的,后续会继续补充

  • this对象

    1
    2
    3
    4
    5
    6
    7
    import { getCurrentInstance } from '@vue/composition-api'
    export default {
    setup (props, context) {
    const ctx = getCurrentInstance // @vue/composition-api里面,这里我们使用这个
    // const { ctx } = getCurrentInstance // vue3里面
    }
    }
  • $router

    1
    ctx.$router.push({ name: 'root' }) // 没多大变化,可以在this(ctx)中里面取或者在context中取也可以(context.root.$router)
  • vuex
    个人喜欢将vuex分modules去写,这样清楚,所以我是开启了namespaced的。在setup中使用时跟vue2一样

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    import { reactive } from '@vue/composition-api'
    import { createNamespacedHelpers } from 'vuex'
    const { mapActions } = createNamespacedHelpers('app')
    export default {
    setup () {
    // methods
    const state = reactive({
    form: {
    userName: '',
    password: ''
    }
    })
    const Login = () => {
    loginRequest().then(({success, msg, data: { menuList }}) => {
    if (success) {
    ctx.setMenuList(menuList) // 通过ctx.调用mapActions解构出来的方法
    }
    })
    }
    return {
    ...mapActions(['setMenuList']) // 直接解构后返回出去就可以了
    }
    }
    }

API记录

  1. ref() 发生值传递的基本对象,之所以要.value访问,因为让值传递可监控,需要变成包装对象,详见https://composition-api.vuejs.org/
    ,在模板(template)中使用会自动解包(<span></span>). 在函数中如果存在于reactive里面会自动解包。如果不是在reactive里面,使用的时候需要.value
    , 如果在hooks里面,返回时需要toRefs()包装,这样在外层调用时如果用Es6的解构时 不会失去响应式。不加toRefs时,外层不能使用解构取值
  2. reactive() 发生引用传递的对象。

其它

  1. 3.0中EventBus没法用了,$off, $on也被删除,推荐使用mitt 来解决
  2. 全局对象设置 app.config.globalProperties.xxx = xxx