如何解决Nuxt博客获取content目录下jobs文件夹内容数时$content不是函数的报错

$content 方法不存在的常见原因 #

• Nuxt版本与@nuxt/content依赖版本不匹配：Nuxt 2项目误装了仅支持Nuxt 3的@nuxt/content v2版本，或Nuxt 3项目误装了仅支持Nuxt 2的@nuxt/content v1版本，都会导致全局注入的内容查询方法失效。
• 模块未在Nuxt配置中注册：仅安装依赖包但未在nuxt.config的modules配置项中引入，Nuxt不会加载content模块的注入逻辑，自然不存在全局可用的$content方法。
• Vuex action参数解构错误：Nuxt默认会把全局挂载的方法绑定在action的this执行上下文上，直接从传入的context参数解构$content，在部分版本下会出现取值为undefined的情况。

分步修正操作 #

1. 基础配置校验
   根据你的Nuxt版本安装匹配的content包，同时在配置文件中显式注册模块，以Nuxt 2场景为例：

   // nuxt.config.js
   export default {
     modules: [
       '@nuxt/content' // 必须添加模块注册，否则功能不生效
     ]
   }
   

2. Vuex模块代码修正
   确认你的jobs长度状态模块存放在项目store目录下（如store/jobsLength.js），调整action的取值逻辑，避免拿不到$content实例：

   // store/jobsLength.js
   export const state = () => ({
     jobsLength: null,
   })
   
   export const mutations = {
     setJobsLength(state, length) {
       state.jobsLength = length
     },
   }
   
   export const getters = {
     getJobsLength(state) {
       return state.jobsLength
     },
   }
   
   export const actions = {
     async fetchJobsCount({ commit }) {
       // 从action的this上下文获取全局挂载的$content方法
       const jobs = await this.$content('jobs').fetch()
       commit('setJobsLength', jobs.length)
     },
   }
   

3. 导航组件逻辑优化
   不要把数据获取放在mounted钩子（会导致首屏客户端才请求数据、每个页面重复调用接口），改用Nuxt组件内置的fetch生命周期钩子自动在服务端执行，同时增加判空逻辑减少冗余请求：

   <template>
     <a href="/jobs">
       Jobs {{ getJobsLength ? `(${getJobsLength})` : '' }}
     </a>
   </template>
   
   <script>
   import { mapGetters, mapActions } from 'vuex'
   
   export default {
     computed: {
       ...mapGetters({
         getJobsLength: 'jobsLength/getJobsLength',
       }),
     },
     async fetch() {
       // 仅在未获取到条目数时触发请求
       if (!this.getJobsLength) {
         await this.fetchJobsCount()
       }
     },
     methods: {
       ...mapActions({
         fetchJobsCount: 'jobsLength/fetchJobsCount',
       }),
     },
   }
   </script>
   

额外校验事项 #

• 确认项目根目录下存在名为content的文件夹，且jobs内容子目录的路径与代码中传入的查询路径一致，避免后续出现内容查询为空的问题。
• 如果你使用的是Nuxt 3版本，项目默认不再内置Vuex状态管理，不需要单独编写Vuex模块，可通过composables结合useState实现全局状态存储，示例代码：

  // composables/useJobsCount.js
  export const useJobsCount = () => {
    const jobsLength = useState('jobsLength', () => null)
    const fetchJobsCount = async () => {
      const jobs = await queryContent('jobs').find()
      jobsLength.value = jobs.length
    }
    return { jobsLength, fetchJobsCount }
  }
  

内容的提问来源于stack exchange，提问作者Robin Schreiner