Vue2使用setuprefreactive等Vue3的组合式@vue/composition-apivuex-composition-helpers

Posted 2023-03-29 浪里小韭菜

有些同学想在当前项目中体验Vue3组合式api，setup、ref、reactive等，而且一步就可以升级到Vue3，但是vue确实2.x版本，不改变当前版本怎么办呢？

vue2.7.0开始自带composition-api可以放心体验，当然不支持 <script setup>语法糖，还需要return，这不影响体验。

那么之前版本呢，

第一步：安装依赖 @vue/composition-api，这里包含了绝大部分api，满足开发，也支持TypeScript语法，可自行选择

npm install @vue/composition-api
// 或
yarn add @vue/composition-api

第二步：安装之后，在main.js中注册

import Vue from \'vue\'
import VueCompositionAPI from \'@vue/composition-api\'
Vue.use(VueCompositionAPI)

第三步：在组件中引入所需的api

// home.js
<script>
    import  ref, computed, reactive, toRefs, onMounted, nextTick, watch, effectWatch  from \'@vue/composition-api\'
    export default 
        name: \'Home\',
        props: 
            name: 
                type: String,
                default: \'\'
            
        ,
        setup(props,  emit, attrs, refs, root ) 
           /** attrs: Object // => this.$attrs
            emit: f() // => this.$emit
            slots:  // => this.$slots
            isServer: false // 是否服务端渲染
            listeners: Object // => this.$listeners
            parent: VueComponent // => this.$parent
            refs: Object // => this.$refs
            root: Vue // => main.js 中的全局唯一的 vue 实例，相当this
            ssrContext:  // => 服务端渲染
            注意：vue3弃用很多，只剩三个 emit、slots、attrs
            **/
            
            const  name  = toRefs(props); // 保持响应式
            const age = ref(18);
            
            onMounted(() => 
                console.log(11)
            )
            
            // 注意监听使用函数式
            watch(() => age.value, (newVal, oldVal) => 
                console.log(newVal)
            )
            
            const addAge = () => 
                age.vaule++
            
            
            return 
                name,
                age,
                addAge
            
        ,
        components: 
            // 注册组件
        ,
        computed: 
            // 导入 mapGetters
        
    
</script>

从第三步，我们看到有些不一样

1、setup中 上下文参数 context 

1.1、this 的替代，root 这里面是vue组件的实例，可以获取到很多属性和方法，如 root.$store、roots.$message

1.2、refs 可以获取子组件的对象，从而获取子组件的 数据和方法

 

2、setup 外，可以使用 components 、computed 正常使用

2.1、components 注册子组件

2.2、computed 属性依赖计算，导入 mapGetters，由于Vuex3.x不支持 useStore 等Api

 

由此导致的问题，解决方案

  1、方法一：简单粗暴、在 setup 中 使用 root , 可以获取 store 中的所有 方法和 属性

  2、方法二：优雅、安装插件  vuex-composition-helpers   npm: https://www.npmjs.com/package/vuex-composition-helpers

npm install vuex-composition-helpers
// 或
yarn add vuex-composition-helpers

<script>
    import  useGetters, useActions  from \'vuex-composition-helpers\';
    export default 
        setup(props, context) 
            const  counter  = useGetters([\'counter\'])

            const  incrementCounter  = useActions([\'incrementCounter\'])

            return 
              counter,
              incrementCounter
            
        
    
</script>