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

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>