Question

如何修复 Vuex 中未知突变类型的错误？

2020-08-14

25419

javascript vue.js

我已经在 Google 上搜索过这个错误，但是我得到的答案对我没有帮助。我尝试使用 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：我还修剪了代码以使其更清晰。

Answer 1

我已经遇到这个问题大约 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

Answer 2

这是实际示例。另外请仔细检查您的 vuex 存储配置/注册。

const store = new Vuex.Store({
    state: {
        items: [
            {
                title: "item1",
                likes: 10
            },
            {
                title: "item2",
                likes: 24
            }
        ]
    },
    actions: {
        like({ commit }, id) {
            commit("LIKE_ITEM", id);
        },
        dislike({ commit }, id) {
            commit("DISLIKE_ITEM", id);
        }
    },
    mutations: {
        LIKE_ITEM(state, id) {
            state.items[id].likes++;
        },
        DISLIKE_ITEM(state, id) {
            state.items[id].likes--;
        }
    },
    getters: {
        items(state) {
            return state.items;
        }
    }
});

new Vue({
    el: "#app",
    store,
    computed: {
        items() {
            return this.$store.getters.items;
        }
    },
    data: () => {
        return {};
    },
    methods: {
        like(id) {
            this.$store.dispatch("like", id);
        },
        dislike(id) {
            this.$store.dispatch("dislike", id);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
    <div v-for='(item, i) in items' :key="i">
        {{item.title }}: {{item.likes}} likes
        <button @click='like(i)'>Like +</button> <button @click='dislike(i)'>Dislike -</button>
    </div>
</div>