如何在 Vuex 模块（vueJs）中过滤命名空间的 getter

Question

My Getter in module called ShopItemCategory

    getters: {
        shopItemsCategories: state => state.ShopItemsCategories.data,
    },

And this is my computed function inside component

  computed: {
    shopItemsCategories() {
      return this.$store.getters['ShopItemCategory/shopItemsCategories'].filter(c => c.shop_id == this.$route.params.id)
    },
    },

when I click save the filter working well but after refreshing it gives error

Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"

and this is the mutation that dispatched in mounted

    mutations: {
        SET_SHOP_ITEM_CATEGORIES(state, shopItemsCategories) {
            state.ShopItemsCategories = shopItemsCategories;
        },
        }

and this is the dispatch command inside mounted() in the component

  mounted() {
    this.$store.dispatch('ShopItemCategory/getShopItemsCategories');
  },

Answer 1

Until your SET_SHOP_ITEM_CATEGORIES mutation is executed, your getter will use whatever initial data you have in your module's state . If that ShopItemsCategories.data property is not defined, you will get the reported error message when your computed property executes.

The simple solution is to define some initial state that makes sense for the rest of your app.

For example

state: {
  ShopItemsCategories: {
    data: []
  }
}