跳到主要内容

响应式 API

2023年05月12日
柏拉文
越努力，越幸运

一、认识​

如果你有一部分状态需要在多个组件实例间共享，你可以使用 reactive() 来创建一个响应式对象，并将它导入到多个组件中。

二、语法​

2.1 定义​

import { reactive } from "vue"

export const state = reactive({
    count: 0,
    setCount(){
        this.count++;
    }
})

2.2 A 组件​

<template>
  <div>
    {{ state.count }}

    <Child></Child>
  </div>
</template>

<script setup lang="ts">
import Child from './Child.vue'
import { state } from './stores/reactive'
</script>

2.3 B 组件​

<template>
  <div>
    {{ state.count }}

    <button @click="state.setCount()">按钮</button>
  </div>
</template>

<script setup lang="ts">
import { state } from './stores/reactive'
</script>