1. 这里是 Vue 学习笔记¶

<script setup>
import { useAppStore } from '@/stores/useAppStore';
import { storeToRefs } from 'pinia'; // <-- 关键工具
import { inject } from 'vue';

// 1. 获取 Pinia Store 实例
// 这一步会访问到 Pinia 在内存中维护的 'app' store 的单例实例
const store = useAppStore();

// 2. 提取响应式引用 (Subscription的核心)
// storeToRefs 是 Pinia 提供的 Composition API 辅助函数。
// 它的作用是：安全地解构 store 中的 state 属性，同时保持它们的响应性。
const { status, retryAttemptCount, lastError } = storeToRefs(store); 

// 3. 模板中使用（自动订阅）
// 此时，status、retryAttemptCount 等都是 Vue 的 Ref 对象。
// 只要 ConnectionManager 调用了 store.setStatus()，这些 Ref 就会更新，
// 从而触发依赖它们的组件模板自动重新渲染。

const appManager = inject('AppManager'); // 注入 Manager 实例，用于调用方法
// ... reconnect 逻辑 ...

</script>

<template>
  <!-- 模板中直接使用提取出来的 Ref，无需 .value -->
  <p>Current State: <strong>{{ status }}</strong></p>

  <div v-if="status === 'CONNECTING'">
    Attempt #{{ retryAttemptCount }}...
  </div>
  <!-- ... -->
</template>

import { toRef } from 'vue';

const propertyRef = toRef(source: object, key: string);

import { reactive, toRef } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});

// 1. 使用 toRef 创建一个 count 的引用
const countRef = toRef(state, 'count'); 

// 2. 它们是相互关联的：

// 通过 Ref 修改：
countRef.value++; 
console.log(state.count); // 输出: 1 (state 也更新了)

// 通过源对象修改：
state.count = 10;
console.log(countRef.value); // 输出: 10 (Ref 也更新了)

// 注入时提供默认值
const theme = inject('theme-mode', 'light');

// 结合 Symbol 和 TypeScript 确保 Key 的唯一性和类型安全
export const ConnectionManagerKey = Symbol('ConnectionManagerKey');

// 提供者
provide(ConnectionManagerKey, appManager);

// 注入者
const appManager = inject<ConnectionManager>(ConnectionManagerKey);

// main.ts

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注册全局属性
app.config.globalProperties.$appName = 'MyApp V3';

// 注册一个全局方法
app.config.globalProperties.$formatDate = (date) => {
    return new Date(date).toLocaleDateString();
};

// 注册您之前设计的 ConnectionManager 实例
import { ConnectionManager } from './services/ConnectionManager';
const appManager = new ConnectionManager();
app.config.globalProperties.$appManager = appManager;

app.mount('#app');

<template>
  <div>
    <h1>Welcome to {{ $appName }}</h1>
    <p>Current Date: {{ $formatDate(new Date()) }}</p>
    <button @click="reconnect">Reconnect</button>
  </div>
</template>

<script>
export default {
  // 选项式 API 访问
  methods: {
    reconnect() {
      // 通过 this 直接访问全局属性
      this.$appManager.reconnectManually();
      console.log(`Using manager from global properties: ${this.$appName}`);
    }
  }
}
</script>

<script setup>
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const globalProps = instance.appContext.config.globalProperties;

// 在 setup 逻辑中访问
const appManager = globalProps.$appManager;

const reconnect = () => {
  appManager.reconnectManually();
}

// 模板中仍可直接访问 $appName
</script>

<template>
  <div>
    <h1>Welcome to {{ $appName }}</h1> 
    <button @click="reconnect">Reconnect (from script setup)</button>
  </div>
</template>

<template>
  <div>
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';
export default {
  setup(){
    const obj = reactive({
      name:'zs',
      age:14
    });
    const changeName = () => {
      obj.name = 'ls';
    };
    watch(() => obj.name,() => {
      console.log('监听的obj.name改变了')
    })
    return {
      obj,
      changeName,
    }
  }
}
</script>