Vue3 组合 API。 localStorage 中的对象始终返回未定义

Question

我正在使用 Vue3 Composition API。基本上，我试图从存储在 localStorage 中的对象获取数据，但我总是收到它是未定义的，即使它确实 100% 存在。

错误是：

"Uncaught (in promise) TypeError: $setup.habits.value is undefined"

我的本地存储对象：

habits:"[{"habitName":"Dance","completedDates":["2023-12-27","2023-12-26","2023-12-28"]},{"habitName":"Act","completedDates":["2023-12-28"]}]"

参考从本地存储获取项目的习惯变量。这是我的组件：

import { ref, nextTick, watchEffect } from 'vue'
import AddHabit from '../components/EditHabits/AddHabit.vue'


let habits = ref(JSON.parse(localStorage.getItem('habits')))

let editingHabit = ref()

watchEffect(() => {
    habits.value = JSON.parse(localStorage.getItem('habits'))
})

const editHabit = async (habit) => {
    editingHabit.value = habit

    await nextTick()
    const inputField = document.getElementById(habit.habitName)
    inputField.focus()
    inputField.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            const index = habits.value.findIndex(h => h.habitName === habit.habitName) 
            
            habits.value[index].habitName = editingHabit.value.habitName
            localStorage.setItem('habits', JSON.stringify(habits.value))
            
            editingHabit.value = null
            
        }
    })
}


</script>

<template>
    <div>
        <h4>Your Current Habits: </h4>
        <div id="total-habits" v-if="habits.value.length">
            <div class="dropdown" v-for="habit in habits.value" :key="habit.habitName">
                <p id="habitEntry" v-if="editingHabit.value !== habit"> {{ habit.habitName }}</p>
                <input :id="habit.habitName" v-else v-model.lazy="editingHabit.value.habitName" type="text">                
                <div class="dropdown-content">
                    <div @click="editHabit(habit)">Edit</div>
                    <div>Pause</div>
                    <div>Delete</div>
                </div>
            </div>
            
        </div>
        <div v-else>No Habits Yet!</div>
        
        
        <h4>Hover on a habit to edit it!</h4>
    </div>
    
    <AddHabit/>
</template>```

Answer 1

在 Vue3 模板中，您不需要像脚本中那样使用

.value

调用变量。

所以

<div v-if="habits.value.length" id="total-habits">

变成

<div v-if="habits.length" id="total-habits">

。

仅通过此修改，您应该能够清除代码。 这是您的代码，但已修改：

<script setup>
import {
  nextTick,
  ref,
  watchEffect
} from 'vue'

const habits = ref([])
const editingHabit = ref({})

watchEffect(() => {
  habits.value = JSON.parse(localStorage.getItem('habits'))
})

const editHabit = async (habit) => {
  editingHabit.value = habit

  await nextTick()
  const inputField = document.getElementById(habit.habitName)
  inputField.focus()
  inputField.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      const index = habits.value.findIndex(h => h.habitName === habit.habitName)

      habits.value[index].habitName = editingHabit.value.habitName
      localStorage.setItem('habits', JSON.stringify(habits.value))

      editingHabit.value = null
    }
  })
}
</script>

<template>
  <div>
    <h4>Your Current Habits: </h4>
    <div v-if="habits.length" id="total-habits">
      <div v-for="habit in habits" :key="habit.habitName" class="dropdown">
        <p v-if="editingHabit !== habit" id="habitEntry"> {{ habit.habitName }}</p>
        <input v-else :id="habit.habitName" v-model.lazy="editingHabit.habitName" type="text">
        <div class="dropdown-content">
          <div @click="editHabit(habit)">Edit</div>
          <div>Pause</div>
          <div>Delete</div>
        </div>
      </div>

    </div>
    <div v-else>No Habits Yet!</div>
    <h4>Hover on a habit to edit it!</h4>
  </div>

  <!--  <AddHabit/>-->
</template>

<style scoped>

</style>

了解更多信息：https://vuejs.org/guide/essentials/reactivity-fundamentals.html