Vue2项目中如何结合@vue/composition-api与Options API使用响应式状态

数据老陈

2026-8-20

在Vue2 Options API中访问@vue/composition-api的响应式状态

你可以通过两种实用方式在Options API组件里访问这个响应式状态：

方式一：组件内直接引入状态模块

直接在Options API组件中导入你的状态模块，利用computed选项获取响应式的counter，用methods修改状态：

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
// 导入你定义的状态模块
import store from './useState'

export default {
  name: 'OptionsApiDemo',
  computed: {
    counter() {
      // 直接返回reactive对象的属性，自动保持响应式
      return store.state.counter
    }
  },
  methods: {
    increment() {
      store.state.counter++
    }
  }
}
</script>

方式二：全局挂载到Vue原型（适合多组件复用）

如果很多组件都需要访问这个状态，可以把它挂载到Vue原型上，避免重复导入：

在项目入口文件（比如main.js）中配置：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import store from './useState'

Vue.use(VueCompositionAPI)
// 将状态挂载到Vue原型，全局可用
Vue.prototype.$store = store

在任意Options API组件中使用：

<template>
  <div>
    <p>Global Counter: {{ counter }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  name: 'GlobalOptionsDemo',
  computed: {
    counter() {
      // 通过this.$store访问全局状态
      return this.$store.state.counter
    }
  },
  methods: {
    increment() {
      this.$store.state.counter++
    }
  }
}
</script>