Nuxt服务端遇Cannot stringify a function警告，疑因@nuxt/devalue求解决

原因说明 #

@nuxt/devalue是Nuxt用于序列化Vuex/Pinia状态的工具，它不支持序列化函数类型的值。当你的store文件中定义了包含函数的对象时，Nuxt在服务端渲染过程中尝试序列化状态就会抛出该警告。

具体解决方法 #

• 将函数移出store状态对象
  把函数定义在store的方法（比如Vuex的actions、mutations，或者Pinia的actions）里，而非状态对象中。示例：

  // store/menu.js
  export const state = () => ({
    // 仅存放可序列化的状态数据
    menuItems: []
  })
  
  export const actions = {
    examMethod() {
      console.log(123)
    }
  }
  

• 抽离为独立工具函数
  将函数单独放到项目的工具文件（如utils/menuUtils.js）中，在需要的地方导入使用：

  // utils/menuUtils.js
  export const examMethod = () => console.log(123)
  
  // 在store或组件中调用
  import { examMethod } from '~/utils/menuUtils'
  

• 用markRaw标记函数（仅限客户端场景）
  若确定函数仅在客户端运行，可使用Vue的markRaw标记它，避免被Nuxt序列化。注意此方法不适合服务端渲染场景：

  // store/menu.js
  import { markRaw } from 'vue'
  
  const obj = {
    examMethod: markRaw(() => console.log(123))
  }
  

内容的提问来源于stack exchange，提问作者Seokki Oh