如果使用 PersistedState，如何从 getter 中删除对象答案

【问题标题】：How can I delete an object from getter if PersistedState is used如果使用 PersistedState，如何从 getter 中删除对象
【发布时间】：2022-10-18 15:59:14
【问题描述】：

我正在创建一个小型网站并面临这样的问题。在网站上，我使用 PersistedState 来保存我添加到收藏夹的产品。但问题是我不能删除这个产品，因为拼接不起作用。他只是在视觉上移除了它，但从 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()
  ]
})

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【问题讨论】：

你有一个“ADD_TO_FAVOURITES”动作，为什么不在拼接后调用一个“REMOVE_FROM_FAVOURITES”动作呢？因此，您可以直观地更新页面和 vuex 存储
我不能这样做，因为我不能在 store.js 突变中正确引用 getter。在错误中写道，未找到该状态。
同样重要的是要知道页面刷新后状态为空，所有数据都在getter中。因此，不可能在突变中引用状态

标签： vuejs2 vuex vuex-modules

【解决方案1】：

我找到了解决我的问题的方法。在突变中，正如上面@yoduh 所说，有必要在突变中正确引用getter。现在突变看起来像这样：

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【讨论】：