Vue3+Pinia待办列表渲染异常及Vue Devtools报错求助

遇到的两个问题 #

• 消息无法渲染：添加消息后，页面不显示新增内容，但消息已正确存入localStorage且Pinia状态同步更新；
• Vue Devtools报错：控制台持续出现错误：backend.js:2119 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Vue') at initBackend (backend.js:2119:28)

应用核心代码 #

App.vue #

<template>
  <div id="app">
    <h1>Vue 3 Pinia Example with Persistent Todo List</h1>
    <ParentComponent />
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { useTodoStore } from './stores/todo'
import ParentComponent from './components/ParentComponent.vue'

export default {
  name: 'App',
  components: {
    ParentComponent
  },
  setup() {
    const todoStore = useTodoStore()
    onMounted(() => {
      todoStore.loadMessages()
    })
  }
}
</script>

ParentComponent.vue #

<template>
  <div>
    <h2>Parent Component</h2>
    <input v-model="newMessage" placeholder="Enter new message" />
    <button @click="addMessage">Add Message</button>
    <ChildComponent />
  </div>
</template>

<script>
import { ref } from 'vue'
import { useTodoStore } from '../stores/todo'
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const todoStore = useTodoStore()
    const newMessage = ref('')

    const addMessage = () => {
      if (newMessage.value.trim() !== '') {
        todoStore.addMessage(newMessage.value)
        newMessage.value = ''
      }
    }

    return {
      newMessage,
      addMessage
    }
  }
}
</script>

ChildComponent.vue #

<template>
  <div>
    <h3>Child Component</h3>
    <ul>
      <li v-for="(message, index) in messages" :key="index">
        <input v-model="messages[index]" />
        <button @click="updateMessage(index, messages[index])">Update</button>
        <button @click="deleteMessage(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { useTodoStore } from '../stores/todo'

export default {
  name: 'ChildComponent',
  setup() {
    const todoStore = useTodoStore()

    return {
      messages: todoStore.messages,
      updateMessage: todoStore.updateMessage,
      deleteMessage: todoStore.deleteMessage
    }
  }
}
</script>

Pinia Store (/src/stores/todo.js) #

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useTodoStore = defineStore('todo', () => {
  const messages = ref([])

  const loadMessages = () => {
    const savedMessages = localStorage.getItem('messages')
    if (savedMessages) {
      messages.value = JSON.parse(savedMessages)
    }
  }

  const saveMessages = () => {
    localStorage.setItem('messages', JSON.stringify(messages.value))
  }

  const addMessage = (newMessage) => {
    messages.value.push(newMessage)
    saveMessages()
  }

  const updateMessage = (index, newMessage) => {
    messages.value[index] = newMessage
    saveMessages()
  }

  const deleteMessage = (index) => {
    messages.value.splice(index, 1)
    saveMessages()
  }

  return {
    messages,
    loadMessages,
    addMessage,
    updateMessage,
    deleteMessage
  }
})

已完成的排查操作 #

• 确认消息可正确存入和读取localStorage；
• 添加控制台日志验证Pinia状态变化；
• 禁用并重新启用Vue Devtools扩展。

问题解决方案 #

1. 消息无法渲染问题 #

原因：在ChildComponent中直接返回messages: todoStore.messages时，会丢失Pinia state的响应性绑定，导致页面无法感知状态更新。

解决步骤：
修改ChildComponent.vue的<script>部分，引入storeToRefs保留响应性：

<script>
import { useTodoStore } from '../stores/todo'
import { storeToRefs } from 'pinia' // 新增导入

export default {
  name: 'ChildComponent',
  setup() {
    const todoStore = useTodoStore()
    const { messages } = storeToRefs(todoStore) // 改用storeToRefs解构获取响应式数据

    return {
      messages,
      updateMessage: todoStore.updateMessage,
      deleteMessage: todoStore.deleteMessage
    }
  }
}
</script>

2. Vue Devtools报错问题 #

可能原因及解决方法：

• 版本不兼容：Vue Devtools版本与项目中Vue 3版本不匹配，将Devtools扩展更新到最新版，同时确保项目Vue版本为稳定版。
• 浏览器缓存干扰：清除浏览器缓存后重新加载页面，或使用隐身模式打开应用。
• 开发环境配置问题：若使用Vite/Vue CLI，检查项目是否正确集成Devtools支持（Vite默认集成，Vue CLI需确保vue-devtools依赖已安装）。
• 扩展冲突：暂时禁用其他浏览器扩展，排查是否有扩展干扰Devtools运行。

内容的提问来源于stack exchange，提问作者HYEIN YU