Vue2使用setup、ref、reactive等Vue3的组合式@vue/composition-api、vuex-composition-helpers

有些同学想在当前项目中体验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, getCurrentInstance } 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, 其他可以通过 getCurrentInstance() 获取组件实例的所有信息
            **/
            
            const instance = getCurrentInstance()
            const { proxy, refs } = instance
            
　　　　　　// 注意，定义变量reactive/ref是，里面的参数不要和template中有重复，如组件、form的ref的变量
            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 install vuex-composition-helpers
// 或
yarn add vuex-composition-helpers

<script>
    import { useGetters, useActions, useStore } from 'vuex-composition-helpers';
    export default {
        setup(props, context) {
            const store = useStore();
            store.commit('GET_USER_INFO', {name: 'zs'})
            
            const { counter } = useGetters(['counter'])

            const { incrementCounter } = useActions(['incrementCounter'])
            const { getUserInfo } = useActions('user', ['getUserInfo'])

            return {
              counter,
              incrementCounter，
              getUserInfo,
            }
        }
    }
</script>

另外，如果想提样 <script setup> 写法可以安装插件 unplugin-vue2-script-setup@ 0.10.2  注意这个插件需要配合 vuex-composition-helpers 插件使用

适用于 Vite、Nuxt、Vue CLI、Webpack、esbuild 等打包开发，github

// vue.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

module.exports = {
  parallel: false, // disable thread-loader, which is not compactible with this plugin
  configureWebpack: {
    plugins: [
      ScriptSetup({ /* options */ }),
    ],
  },
}

// webpack.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {
  /* ... */
  plugins: [
    ScriptSetup({ /* options */ }),
  ]
}

// vite.config.ts
import { defineConfig } from 'vite'
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
import ScriptSetup from 'unplugin-vue2-script-setup/vite'

export default defineConfig({
  plugins: [
    Vue2(),
    ScriptSetup({ /* options */ }),
  ],
})

集成开发环境

我们建议将VS Code与Volar一起使用以获得最佳体验(如果有 Vetur，您可能希望禁用它)。

使用 Volar 时，需要安装@vue/runtime-dom为 devDependencies 才能使其在 Vue 2 上运行。

npm i -D @vue/runtime-dom

建议

如果您喜欢使用<script setup>，您可能还想尝试unplugin-auto-import进一步改进体验。

为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API，无需import导入

// 未安装前
import { computed, ref } from 'vue'
import { useState } from 'vuex'
const count = ref(0)
const doubled = computed(() => count.value * 2)
const state = useState()

// 安装后
const count = ref(0)
const doubled = computed(() => count.value * 2)
const state = useState()

安装

npm i -D unplugin-auto-import

 配置 github

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({ /* options */ }),
    ],
  },
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({ /* options */ }),
  ],
}

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})