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

Question

在我的Nuxt页面中，我有一个导航组件，我试图在其中实现如下

Logo Infos

其中(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：$content不是一个函数

我觉得我错过了什么，但在代码中的2-3小时之后，我就瞎了。

Answer 1

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

commit('setJobsLength', jobs.length)

但是在你的突变中，你确实使用了length 。正确的版本如下：

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

同时，让自己变得容易，剥去吸气器，直接使用状态。

...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，请使用本地状态。