programing

nuxt 블로그의 컨텐츠 폴더에 있는 항목 수 가져오기

projobs 2022. 8. 10. 23:38
반응형

nuxt 블로그의 컨텐츠 폴더에 있는 항목 수 가져오기

내 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)
  },
}

내 내비게이션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>

응답은

미포함(약속)유형 오류: $content가 함수가 아닙니다.

뭔가 놓친 것 같은데 코드 입력 후 2~3시간 정도 지나면 눈이 멀어요.

는 아마도 당신이 이미당신의 입니다.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이 신신 your your your since since since since sinceasync

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

PS: Vuex ps ps ps ps ps ps ps ps ps ps 。jobsLength이치노

언급URL : https://stackoverflow.com/questions/67326309/get-number-of-items-in-content-folder-in-a-nuxt-blog

반응형