How can I delete an object from getter if PersistedState is used

Question

I am creating a small website and faced with such a problem. On the site, I use PersistedState to save the products that I added to favorites. But the problem is that I can't delete this product since splice doesn't work. He only visually removes it, but it can be seen from VueJS DevTools that it is still there.

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>

products-item.js

<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>

Answer 1

I have found a solution to my problem. In mutation, as @yoduh said above, it was necessary to correctly refer to getter in mutations. Now the mutation looks like this:

DELTE_PRODUCTS(state, {data, getters}){
      getters.FAVOURITES.splice(0,1)
      //console.log(data);
      //console.log(state);
    }

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