javascript - 如何修复 Vuex 中未知突变类型的错误?

标签 javascript vue.js

我已经用谷歌搜索了这个错误,但是我得到的答案并没有帮助我。我正在尝试使用 Vuex 来计算喜欢与不喜欢的数量。我正在使用 jsonplaceholder 获取数据。在这里,我获取我的数据并为所有对象设置一个相似的属性。

actions: {
async fetchPhotos({commit}) {
      const response = await axios.get('https://jsonplaceholder.typicode.com/photos');
      commit('setPhotos', response.data.splice(0,100))
    },
}

mutations: {
setPhotos: (state, photos) => {
      (state.albumList = photos);
      state.albumList.forEach(element => element.likes = 0)}
}
在我的 dom 之后,我想用一个按钮表示不喜欢,另一个按钮表示喜欢。单击按钮时,我想显示类似的计数器。
<div v-for="photos in allPhotos" :key="photos.id">
        <div class="card" @click="detail(photos)"><img :src="photos.thumbnailUrl" alt=""></div>
        <div class="likes">
          <div class="myButton" ><button class="red" @click="minus(photos.id)"><i class="fas fa-minus"></i></button></div>
          <div>{{photos.likes}}</div>
          <div class="myButton "><button class="green" @click="plus(photos.id)"><i class="fas fa-plus"></i></button></div>
        </div>
</div>
所以我在我的商店和我的脚本中添加了减号突变。
methods: {
    ...mapMutations(['minus']),
state: {
    albumList : [],
  },

mutations: {
    minus: (state, id) => {
      state.albumList[id-1].likes--
   },
毕竟,我有一个错误:

[vuex] unknown mutation type: minus.


我看不出我在这里做错了什么。
PS:我还 trim 了代码以使其更清晰。

最佳答案

我已经吃了大约 12 个小时了。使用 Vuex 4.0.1。
经过大量的谷歌搜索,对于一些最常见的原因,我得出了关于上述问题的以下结论:
为什么会发生这种情况的常见问题

  • 对此不确定,但这是建议之一,版本(这发生在版本 2 之间的某个地方)。我认为这不再是问题,
  • 第二个也是最重要的,命名:
  • 如果使用命名空间模块,请确保为模块添加前缀,例如this.$store.commit('moduleName/myMutation');
  • 命名您的mutations , actions在您的模块中。只需确认并确保您的拼写正确
  • 对于命名空间模块,确保添加 namespaced: true在其中。

  • actually the later was my problem after setting mine to namespace: true instead of namespaced: true

    关于javascript - 如何修复 Vuex 中未知突变类型的错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63414025/

    相关文章:

    Javascript 表单计算返回 NaN 直到最后一个条目

    javascript - 我可以发送多个有关不断变化的操作的事件吗?

    javascript - 检查变量是否包含 img 标记名

    javascript - Vue js 在更改路由时重新渲染相同的组件

    javascript - 如何在 vue.js 中包含第 3 方 JavaScript 文件?

    vue.js - 当您在 Jest 测试中等待 "anything"时,Vue 是否会计算 nextTick?

    javascript - 在 vue.js 中渲染子组件之前,等待父组件安装/准备就绪

    javascript - Snap Svg 复制路径组从一张纸到另一张纸 2,适合响应式 div

    javascript - 如何将数据从 null 更改为 0?

    javascript - do while 循环中的 setTimeout