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

Question

在我的 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 小时后我就瞎了。

Answer 1

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

commit('setJobsLength', jobs.length)

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

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

还有，方便自己，去掉getter，直接使用state

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

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

Get number of items in content folder in a nuxt blog

fetch

vue-component

vuex

nuxt.js

nuxt-content