Как я могу удалить объект из getter, если используется PersistedState

Question

Делаю небольшой сайт и столкнулся с такой проблемой. На сайте я использую PersistedState для сохранения товаров, добавленных в избранное. Но проблема в том, что я не могу удалить этот товар, так как не работает splice(). Он только визуально убирает его, но по VueJS DevTools видно, что он все еще там. При этом скорее всего теряется реактивность

store.js

import { createStore } from 'vuex'
import axios from "axios"
import createPersistedState from "vuex-persistedstate";
export default createStore({
  state: {
    products: [],
    favourites: []
  },
  getters: {
    PRODUCTS(state){
      return state.products
    },
    PRODUCT_BY_ID(state){
      return ProductId => {
        return state.products.find(Product => Product.id === ProductId)
      }
    },
    FAVOURITES(state){
      return state.favourites
    }
  },
  mutations: {
    SET_PRODUCTS_TO_STATE: (state, products) =>{
      state.products = products
    }, 
    SET_TO_FAVOURITES: ( state, favouritesItem) =>{
      if (state.favourites.length){
        let ProductExist = false
        state.favourites.map(function(item){
          if (item.id === favouritesItem.id){
            ProductExist = true
          }
        })
        if (!ProductExist){
          state.favourites.push(favouritesItem)
        } 
      } else{
        state.favourites.push(favouritesItem)
      }
    }
  },
  actions: {
    async GET_PRODCUTS_FROM_DB({commit}){
      try {
        const products = await axios("http://localhost:3000/products", {
          method: "GET"
        })
        commit("SET_PRODUCTS_TO_STATE", products.data)
        return products.data
      } catch (error) {
        return error
      }
    },
    ADD_TO_FAVOURITES({commit}, favouritesItem){
      commit('SET_TO_FAVOURITES', favouritesItem)
    }
      
  },
  modules: {
  },
  plugins: [
    createPersistedState()
  ]
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Страница товара

<script>
import { mapGetters } from 'vuex'
export default {
    name: "ProductsCart",
    data(){
        return {
            IsProductExist: false
        }
    },
    computed: {
        ...mapGetters([
            'FAVOURITES'
        ]),
        
    },
    props: {
        Productsitem: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        addToCarts(){
            if(this.$route.name === 'Favourites'){
                this.FAVOURITES.splice(this.FAVOURITES.indexOf(this.Productsitem), 1)
            } else {
                this.$emit('addToCarts', this.Productsitem)
                this.IsProductExist = true
            }
            
        }
    },
    mounted(){
        this.$nextTick(function () {
            if(this.FAVOURITES.length > 0){
                for(let i = 0; i < this.FAVOURITES.length; i++){
                    if(this.FAVOURITES[i].id === this.Productsitem.id){
                        this.IsProductExist = true
                    }
                }
            }
        })
        
    }
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

БЛОГ НА HUSL

Как я могу удалить объект из getter, если используется PersistedState

Ответы (0 шт):