获取 nuxt 博客中内容文件夹中的项目数答案

【问题标题】：Get number of items in content folder in a nuxt blog获取 nuxt 博客中内容文件夹中的项目数
【发布时间】：2021-07-23 08:23:04
【问题描述】：

在我的 Nuxt 页面中，我有一个导航组件，我尝试在其中实现类似

[徽标] [产品] [信息] [工作 (2)]

其中 (2) 是一个标志，表示相应“作业”内容文件夹中的项目数。我试图填写该状态，但无法使其正常工作。我的状态是这样的：

export const state = () => ({
  jobsLength: null,
})

export const mutations = {
  setJobsLength(state, payload) {
    state.jobsLength = payload.length
  },
}

export const getters = {
  getJobsLength(state) {
    return state.jobsLength
  },
}

export const actions = {
  async fetch({ $content, commit }) {
    const jobs = await $content('jobs').fetch()
    commit('setJobsLength', jobs.length)
  },
}

我的 Navigation.vue 组件：

<a href="/jobs">
    Jobs {{ getJobsLength }}
</a>

....

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
      ...mapGetters({
          getJobsLength: 'jobsLength/getJobsLength',
      }),
  },
  mounted() {
      this.fetchJobs()
  },
  methods: {
      ...mapActions({
          fetchJobs: 'jobsLength/fetch',
      }),
  },
}
</script>

响应是

Uncaught (in promise) TypeError: $content is not a function

我觉得我错过了一些东西，但在代码中 2-3 小时后我就失明了。

【问题讨论】：

如果你 const jobs = await $content('jobs').fetch() 然后 job.length 在你里面 .vue 组件会发生什么？没有 vuex，直接在你的组件中。
@kissu 我有多个地方/组件要使用该值（桌面导航、移动导航、页脚等），但在其他方面，我现在使用您的解决方案已经为价值构建了一个组件。

标签： fetch vue-component nuxt.js vuex nuxt-content

【解决方案1】：

您的错误可能是因为您已经将一个数字传递给您的提交 (jobs.length)

commit('setJobsLength', jobs.length)

但是在你的突变中，你确实使用了length再次。正确的版本是这样的：

setJobsLength(state, arrayLength) { // better naming, rather than payload
  state.jobsLength = arrayLength
},

另外，让你自己轻松，剥离getter并直接使用状态

...mapState('jobsLength', ['jobsLength'])
// btw here the namespaced module should probably be renamed to something more generic like "jobs"
...mapState('jobs', ['jobsLength'])

您的操作也是如此，为什么不直接调用它async fetchJobs({ $content, commit }) 而不是之后重命名它。

最后，不要忘记创建async mounted，因为您的操作是async

async mounted() {
    await this.fetchJobs()
},

PS: Vuex 可能是矫枉过正并使事情复杂化。如果您不需要全局jobsLength，请使用本地状态。

【讨论】：