1

在我的 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-3h 之后我就失明了。

4

1 回答 1

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

于 2021-04-30T01:39:20.823 回答