У меня есть функция 'watched-items': нажмите на значок, он добавится в массив в моем магазине Vuex, значок изменится на тик, нажмите на тик, он удалит его из магазина Vuex и значок меняется обратно.
Когда я проверяю Vuex в инструментах разработчика, он работает как положено.
Странно, что свойство data, отвечающее за переключение значков, устанавливается только на false, когда оно хотеть. Он будет работать в течение короткого периода времени, через обновления, затем остановится без видимой причины и не вернется, пока не почувствуете, что это похоже.
Пример (извинения за качество): 
В консоли вы можете видеть, что свойство данных «наблюдал» переключается в true, но переключается в false только тогда, когда это похоже на это. Есть идеи, почему он это делает?
Значки «Watched»:
<img
src="svg/eye-regular.svg"
v-if="!watched"
@click="addToWatched(item), isWatched(item), log()"
/>
<img
src="check-solid.svg"
v-if="watched"
@click="removeFromWatched(item), isWatched(item), log()"
/>
(«item» - это объект, передаваемый в качестве опоры)
watched data свойство:
data() {
return {
watched: false
};
},
вычислено:
...mapGetters(["watchedItems"])
методы:
...mapActions([
"addToWatched",
"removeFromWatched"
]),
isWatched(item) {
let watchFind = this.watchedItems.find(i => {
return i.id === item.id
? (this.watched = true)
: (this.watched = false);
});
},
log() {
console.log("data -> watched", this.watched);
}
Vuex store (не уверен, что этот код актуален, так как кажется, что магазин работает нормально) :
const actions = {
// commit items to watched
addToWatched({ commit }, item) {
commit("setWatchedItems", item);
},
removeFromWatched({ commit }, item) {
commit("deleteWatchedItem", item);
},
};
const mutations = {
setWatchedItems: (state, item) => {
let watchFind = state.watched.find(i => {
return i.id === item.id;
});
if (!watchFind) {
state.watched.push(item);
}
},
deleteWatchedItem: (state, item) => {
let watchFind = state.watched.find(i => {
return i.id === item.id;
});
if (watchFind) {
state.watched = state.watched.filter(i => {
return i.id !== item.id;
});
}
},
};
const state = {
watched: []
};
const getters = {
watchedItems: state => state.watched
};
ОБНОВЛЕНИЕ
Это все еще действует, как описано выше, но я обнаружил, что если я добавлю «наблюдал» на одном элементе, то сразу после удалить из «наблюдал» на другом, это работает:
(Вы не можете видеть, когда я нажимаю, но в начале GIF I ' m нажимаю один и тот же значок несколько раз без изменений)