TypeError: 'set' on proxy: trap returned falsish for property 'X'

[michealroberts]

I have the following store defined:

import { defineStore } from 'pinia'

export const useProductsStore = defineStore('products', {
  state: () => ({
      products: [] as Product[]
  }),

  getters: {
    products: (state) => state.products
  },

  actions: {
    setProducts(products: Product[]) {
      this.products = products
    }
  }
})

Let's say I have my productStore defined in setup as follows:

const productStore = useProductsStore()

When I essentially call productStore.setProducts([]), I see this bizarre error.

(FWIW, the products are coming back from an API as blank)

Expected behavior

No error, I should be able to set my products to an empty array without issue.

Actual behavior

I see the following error:

index.ts:16 Uncaught (in promise) TypeError: 'set' on proxy: trap returned falsish for property 'products'

Additional information

pinia version 2.0.11

[soc221b]

You should not use the same name in state, getters, actions, use this instead:

export const useProductsStore = defineStore('products', {
  state: () => ({
-    products: [] as Product[]
+   _products: [] as Product[]
  }),

  getters: {
-    products: (state) => state.products
+    products: (state) => state._products
  },

  actions: {
    setProducts(products: Product[]) {
-     this.products = products
+     this._products = products
    }
  }
})

or

export const useProductsStore = defineStore('products', () => {
  const products = ref<Product[]>([])

  const setProducts = (_products: Product[]) => {
    products.value = _products
  }

  return {
    products: computed(() => products.value),
    setProducts,
  }
})

[posva]

Also, note you don't need to create a getter that just returns the state. Just remove the getter altogether. Getters are like computed, they are only useful if they return a modified version of the state

[boxshadow]

U save my life 👍

[zarka07]

thx, Ernest. i didn't understand why yet, but renaming is working!

[arnonrdp]

You saved my ass!

[doox911]

Doesn't make sense:

products: computed(() => products.value),

For example, we always need to use storeToRefs, if we need reactivity:

import { defineStore } from 'pinia';
import { ref } from 'vue';
import { useRegionService } from 'src/hooks';
import type { Regions } from 'src/types';

const { getRegions } = useRegionService();

export const useRegionStore = defineStore('regions', () => {
  const regions = ref<Regions>({});

  function regionName(key: number) {
    return regions.value[key] || key;
  }

  async function updateRegions() {
    regions.value = (await getRegions()).value;
  }

  return {
    regions, // or computed(() => regions.value),
    regionName,
    updateRegions,
  };
});

Some component:

<script setup lang="ts">
  import { computed } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useRegionStore } from 'Stores/useRegionStore';

  const RegionStore = useRegionStore();
  const { regions } = storeToRefs(RegionStore);
</script>