// useSharedState.js
import { reactive, readonly } from 'vue';

// 模塊級變量（單例）
const sharedState = reactive({
  count: 0,
  user: null,
  settings: { theme: 'light' }
});

export function useSharedState() {
  // 提供只讀狀態(tài)和修改方法
  return {
    state: readonly(sharedState), // 防止直接修改
    increment: () => sharedState.count++,
    setUser: (user) => { sharedState.user = user; },
    updateTheme: (theme) => { sharedState.settings.theme = theme; }
  };
}

// sharedInjection.js
import { inject, provide, ref, readonly } from 'vue';

const SHARED_KEY = Symbol('shared-state');

export function provideSharedState() {
  const state = ref({ items: [], total: 0 });

  // 提供狀態(tài)和操作方法
  provide(SHARED_KEY, readonly({
    state,
    addItem: (item) => {
      state.value.items.push(item);
      state.value.total += item.price;
    },
    clearCart: () => {
      state.value.items = [];
      state.value.total = 0;
    }
  }));

  return { state };
}

export function useSharedState() {
  const shared = inject(SHARED_KEY);
  if (!shared) {
    throw new Error('useSharedState must be used within provideSharedState');
  }
  return shared;
}

// 深入理解響應(yīng)式共享
import { ref, reactive, effect } from 'vue';

// ref 共享示例
const countRef = ref(0);

// effect 會追蹤所有使用 countRef.value 的組件
effect(() => {
  console.log('Count changed:', countRef.value);
});

// reactive 共享示例
const state = reactive({ count: 0 });

// 所有訪問 state.count 的組件都會響應(yīng)變化

// Hook 共享 - 模塊級隔離
// componentA.js
import { useSharedState } from './shared';
const { state } = useSharedState(); // 與 B 共享同一實例

// componentB.js
import { useSharedState } from './shared';
const { state } = useSharedState(); // 與 A 共享同一實例

// Store 共享 - 全局隔離
import { useStore } from 'vuex';
const store = useStore(); // 全局唯一 Store 實例

// Hook 性能優(yōu)化示例
import { computed } from 'vue';

const items = ref([]);

// 使用 computed 避免重復(fù)計算
const filteredItems = computed(() =>
  items.value.filter(item => item.active)
);

// Store 通常內(nèi)置優(yōu)化
// Pinia 示例
export const useStore = defineStore('main', {
  state: () => ({ items: [] }),
  getters: {
    filteredItems: (state) =>
      state.items.filter(item => item.active)
  }
});

// TypeScript + Hook
interface SharedState {
  count: number;
  user: User | null;
}

const state = reactive<SharedState>({
  count: 0,
  user: null
});

// TypeScript + Pinia
export const useStore = defineStore('main', {
  state: () => ({
    count: 0 as number,
    user: null as User | null
  })
});

// 場景1：主題切換（簡單全局狀態(tài)）
// useTheme.js
const theme = ref('light');

export function useTheme() {
  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light';
  };

  return { theme, toggleTheme };
}

// 場景2：表單狀態(tài)管理（局部復(fù)雜邏輯）
// useForm.js
export function useForm(initialData) {
  const data = reactive({ ...initialData });
  const errors = ref({});

  const validate = () => {
    // 復(fù)雜驗證邏輯
    return Object.keys(errors.value).length === 0;
  };

  return { data, errors, validate };
}

// 場景：購物車（跨組件共享 + 復(fù)雜業(yè)務(wù)邏輯）
// store/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    total: 0,
    lastUpdated: null
  }),

  actions: {
    addItem(item) {
      // 業(yè)務(wù)邏輯：庫存檢查、促銷計算等
      if (this.checkStock(item)) {
        this.items.push(item);
        this.calculateTotal();
        this.lastUpdated = new Date();
      }
    },

    async checkout() {
      // 異步操作：API 調(diào)用、事務(wù)處理
      const result = await api.checkout(this.items);
      if (result.success) {
        this.clearCart();
      }
    }
  },

  getters: {
    itemCount: (state) => state.items.length,
    formattedTotal: (state) => `$${state.total.toFixed(2)}`
  }
});

// 混合模式示例：用戶認(rèn)證 + 本地狀態(tài)
import { useAuthStore } from '@/stores/auth'; // Pinia Store
import { useLocalState } from './useLocalState'; // 自定義 Hook

export function useAppLogic() {
  // 全局狀態(tài)從 Store 獲取
  const authStore = useAuthStore();

  // 局部狀態(tài)從 Hook 獲取
  const localState = useLocalState();

  // 組合邏輯
  const canAccessFeature = computed(() =>
    authStore.isAuthenticated && localState.hasPermission
  );

  return {
    // 共享全局狀態(tài)
    user: computed(() => authStore.user),
    // 共享局部狀態(tài)
    localData: localState.data,
    // 組合業(yè)務(wù)邏輯
    canAccessFeature,
    // 統(tǒng)一操作方法
    loginAndInit: async (credentials) => {
      await authStore.login(credentials);
      localState.initialize();
    }
  };
}

// 1. 使用 Symbol 避免命名沖突
const SHARED_KEY = Symbol('app-shared');

// 2. 實現(xiàn)懶加載
let sharedInstance = null;
export function useShared() {
  if (!sharedInstance) {
    sharedInstance = createSharedInstance();
  }
  return sharedInstance;
}

// 3. 添加銷毀邏輯
export function useSharedWithCleanup() {
  const state = reactive({ /* ... */ });

  onUnmounted(() => {
    // 清理副作用
    state.listeners?.forEach(off => off());
  });

  return { state };
}

// 1. 模塊化組織 Store
// stores/index.js
export { useAuthStore } from './auth';
export { useCartStore } from './cart';
export { usePreferenceStore } from './preference';

// 2. 避免在 Store 中存儲非狀態(tài)數(shù)據(jù)
// ? 錯誤：Store 存儲 DOM 引用
// ? 正確：Store 只存儲純數(shù)據(jù)

// 3. 使用 Pinia 的插件系統(tǒng)
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); // 持久化插件