Блог

Я погуглил эту ошибку, однако ответы, которые я получаю, мне не помогли. Я пытаюсь подсчитать количество «нравится-не нравится» с помощью Vuex. Я использую jsonplaceholder для данных. Здесь я беру свои данные и устанавливаю атрибут like для всех объектов.

 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] неизвестный тип мутации: минус.

Я не вижу, что я здесь делаю не так.

PS: Я также урезал код, чтобы он был понятнее.

У меня это уже около 12 часов. Используя vuex 4.0.1. После долгих поисков в Google я пришел к следующему выводу об этой проблеме, описанной выше, по некоторым из наиболее распространенных причин:

Общие проблемы, почему это может произойти

1. Не уверен насчет этого, но это было одно из предложений, версии (это произошло где-то между версиями 2 примерно там). Я не думаю, что это больше не проблема,
2. Второе и самое важное, именование:

• при использовании модулей с пространством имен убедитесь, что вы установили префикс к модулю, например this.$store.commit('moduleName/myMutation');
• Присвоение имен вашим mutations , actions внутри ваших модулей. Просто подтвердите и убедитесь, что у вас правильное написание
• Для модулей с пространством имен убедитесь, что вы добавляете namespaced: true в него.

на самом деле позже была моя проблема после установки моего на namespace: true вместо namespaced: true

Вот рабочий пример. Также дважды проверьте конфигурацию / регистрацию вашего магазина 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>