Question

我正在尝试使用vuex中的mapActions帮助程序将操作映射到组件。这是我的labels.js vuex模块：

export const FETCH_LABELS = 'FETCH_LABELS'
export const FETCH_LABEL = 'FETCH_LABEL'

const state = () => ({
  labels: [
    { name: 'Mord Records', slug: 'mord', image: '/images/labels/mord.jpg'},
    { name: 'Subsist Records', slug: 'subsist', image: '/images/labels/subsist.jpg'},
    { name: 'Drumcode Records', slug: 'drumcode', image: '/images/labels/drumcode.png'},
  ],
  label: {} // null
})

const mutations = {
  FETCH_LABEL: (state, { label }) => {
    state.label = label
  },
}

const actions = {
  fetchLabel({commit}, slug) {

    let label = state.labels.filter((slug, index) => {
      return slug == state.labels[index]
    })

    commit(FETCH_LABEL, { label })
  },
}

const getters = {
  labels: state => {
    return state.labels
  },

  label: (state, slug) => {
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

这是我的组件_slug.vue页面，我要在其中映射fetchLabel操作：

<template>
  <div class="container">

        <div class="section">
            <div class="box">
                <h1>{{ $route.params.slug }}</h1>
            </div>

        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      title: this.$route.params.slug
    };
  },
  computed: {
    // Research
    // labels() {
    //   return this.$store
    // }

    ...mapGetters({
      labels: "modules/labels/labels"
    })
  },
  components: {},
  methods: {
    ...mapActions({
      fetchLabel: 'FETCH_LABEL' // map `this.add()` to `this.$store.dispatch('increment')`
    })
  },
  created() {
    console.log('created')
    this.fetchLabel(this.$route.params.slug)
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: "app",
}
</script>

<style>
</style>

然而，在created()的{{1}}生命周期挂钩中，它在控制台中引发了以下错误：

this.fetchLabel(this.$route.params.slug)

我缺少什么或做错了什么？请帮我解决这个问题。预先感谢！

Answer 1

您的操作名称是fetchLabel，而不是FETCH_LABEL（这是一个变体）。在mapActions中更改为

methods: {
  ...mapActions({
     fetchLabel
  })
},

Answer 2

请注意，在Nuxt.js中：

模块：store目录中的每个 .js 文件都转换为命名空间模块（索引是根模块）。

您正在使用：

这是我的labels.js vuex模块：

使用如上所述的labels.js，因此您需要将所有内容作为命名空间模块进行访问，因此您的mapAction助手应该像这样：

methods: {
  ...mapActions({
    nameOfMethod: 'namespace/actionName'
  })
}

所以您会得到这个：

...mapActions({
  fetchLabel: 'labels/fetchLabel'
})

您还可以在希望将操作名称保留为方法名称时进行清理。

...mapActions('namespace', ['actionName']),
...

所以您会得到这个：

...mapActions('labels', ['fetchLabel']),
...

在这两种情况下，计算出的道具都应该可以正常工作。

Nuxt.js / Vuex-[vuex]未知操作类型：FETCH_LABEL

2 个答案: