Vue 3 실전: 상태 관리 (Pinia 없이)

<div id='state' style='font-family:monospace;padding:16px;background:#0d1117;color:#e8e8e8'>
<div id='state-out'></div>
</div>
<script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
<script>
const{createApp,reactive,provide,inject,computed}=Vue;
const store={
  state:reactive({units:[],alertLevel:'LOW'}),
  addUnit(model,threat){this.state.units.push({id:Date.now(),model,threat});this.updateAlert();},
  removeUnit(id){this.state.units=this.state.units.filter(u=>u.id!==id);this.updateAlert();},
  updateAlert(){const max=Math.max(0,...this.state.units.map(u=>u.threat));this.state.alertLevel=max>=9?'CRITICAL':max>=7?'HIGH':max>=4?'MEDIUM':'LOW';}
};
const UnitList={
  setup(){const s=inject('store');return{s};},
  template:`<div>
    <div v-for='u in s.state.units' :key='u.id' style='display:flex;justify-content:space-between;padding:4px 0;font-size:11px;border-bottom:1px solid #111;'>
      <span style='color:#f59e0b;'>{{u.model}}</span>
      <span style='color:#888;'>{{u.threat}}</span>
      <button @click='s.removeUnit(u.id)' style='background:none;color:#10b981;border:none;cursor:pointer;font-size:10px;'>✕</button>
    </div>
  </div>`
};
createApp({
  components:{UnitList},
  setup(){
    provide('store',store);
    store.addUnit('T-800',8);store.addUnit('T-1000',10);
    const color=computed(()=>store.state.alertLevel==='CRITICAL'?'#10b981':store.state.alertLevel==='HIGH'?'#f59e0b':'#22c55e');
    const addRandom=()=>store.addUnit('T-'+Math.floor(Math.random()*900+100),Math.floor(Math.random()*10)+1);
    return{store,color,addRandom};
  },
  template:`<div>
    <div :style='{color:color}' style='font-size:12px;margin-bottom:12px;'>ALERT: {{store.state.alertLevel}}</div>
    <unit-list/>
    <button @click='addRandom' style='margin-top:8px;background:#333;color:#888;border:none;padding:6px 12px;cursor:pointer;font-size:10px;font-family:monospace;'>ADD RANDOM</button>
  </div>`
}).mount('#state-out');
</script>