Files

T

yeuimu 6c61a4e871 feat(deploy): production deployment setup and fixes

- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma
  binaryTargets for openssl 3.0
- nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal
  cron, http->https redirect
- prisma: add origin_goods.delisted migration, sync missing schema
  (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz
- api: CORS wildcard reflection, helmet CORP cross-origin, price
  backfill in persistProductDetail, categoryIcon ancestor fallback,
  mediaByColor per-color gallery in public goods detail
- admin: /admin base path (vite + router)
- import-data.mjs: udt_name casting, serial sequence advance fix

2026-08-26 14:23:09 +08:00

5.2 KiB

Raw Blame History

title, impact, impactDescription, type, tags

title

impact

impactDescription

type

Provide/Inject Values Are Not Reactive by Default

Impact: HIGH - A common misconception is that provide/inject automatically maintains reactivity. By default, provided primitive values are NOT reactive. If the provided value changes in the provider, injecting components will NOT be updated.

Task Checklist

Always wrap primitive values in ref() before providing
Use computed() in Options API provide() for reactive data
Never destructure refs when providing - pass the ref directly
Understand that provided refs are NOT auto-unwrapped in injectors

The Gotcha: Primitives Lose Reactivity

Wrong - Primitive loses reactivity:

<!-- Provider.vue -->
<script setup>
import { ref, provide } from 'vue'

const count = ref(0)

// WRONG: Providing the unwrapped value loses reactivity
provide('count', count.value) // Provides 0, not a reactive value

function increment() {
  count.value++ // Injector will NOT see this change
}
</script>

<!-- Injector.vue -->
<script setup>
import { inject } from 'vue'

const count = inject('count') // Gets 0, forever static
</script>

<template>
  <!-- This will always show 0 -->
  <div>Count: {{ count }}</div>
</template>

Correct - Provide the ref itself:

<!-- Provider.vue -->
<script setup>
import { ref, provide } from 'vue'

const count = ref(0)

// CORRECT: Provide the ref, not the value
provide('count', count)

function increment() {
  count.value++ // Injector WILL see this change
}
</script>

<!-- Injector.vue -->
<script setup>
import { inject } from 'vue'

// The ref is injected as-is, maintaining reactivity
const count = inject('count')
</script>

<template>
  <!-- Access .value in script, auto-unwrapped in template -->
  <div>Count: {{ count }}</div>
</template>

Options API: Use computed() for Reactivity

In Options API, the provide option with plain properties is NOT reactive:

Wrong - Options API without computed:

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  // WRONG: This is NOT reactive
  provide() {
    return {
      message: this.message // Provides 'Hello' as a static string
    }
  }
}

Correct - Use computed() in Options API:

import { computed } from 'vue'

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  provide() {
    return {
      // CORRECT: Wrap in computed for reactivity
      message: computed(() => this.message)
    }
  }
}

Understanding Ref Behavior in Inject

When you provide a ref, it is injected as-is and NOT auto-unwrapped:

<!-- Provider.vue -->
<script setup>
import { ref, provide } from 'vue'

const user = ref({ name: 'John' })
provide('user', user)
</script>

<!-- Injector.vue -->
<script setup>
import { inject } from 'vue'

const user = inject('user')

// In script, access with .value
console.log(user.value.name) // 'John'

function updateName(newName) {
  user.value.name = newName // Works, but mutations should be in provider
}
</script>

<template>
  <!-- In template, auto-unwrapped at top level -->
  <div>{{ user.name }}</div>
</template>

Providing Reactive Objects

Reactive objects (created with reactive()) maintain reactivity when provided:

<!-- Provider.vue -->
<script setup>
import { reactive, provide } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

provide('state', state)
</script>

<!-- Injector.vue -->
<script setup>
import { inject } from 'vue'

const state = inject('state')
// state.count and state.message are reactive
</script>

Common Mistake: Destructuring Breaks Reactivity

Wrong - Destructuring provided reactive state:

<script setup>
import { inject } from 'vue'

// WRONG: Destructuring loses reactivity
const { count, message } = inject('state')
// count and message are now static values
</script>

Correct - Keep the reference intact:

<script setup>
import { inject, toRefs } from 'vue'

const state = inject('state')
// Use state.count and state.message directly

// Or use toRefs if you need destructured reactive refs
const { count, message } = toRefs(state)
</script>

Debugging Tip

If your injected value isn't updating:

Check if you provided ref.value instead of ref
Check if you destructured a reactive object
In Options API, ensure you used computed()
Use Vue DevTools to inspect the provided values

5.2 KiB Raw Blame History