Cannot assign because it is a read-only property

[amrap030]

Hello, for some reason I get the following error when assigning a value to this.balance in the actions: Cannot assign to 'balance' because it is a read-only property.

My code looks like this, what am I doing wrong?

import { defineStore } from "pinia";
import { getBalance } from "@/services/wallet-service";

export const useUserStore = defineStore("main", {
  // initial state
  state: () => ({
    address: "",
    balance: 0,
  }),
  getters: {
    address: (state) => state.address,
    balance: (state) => state.balance,
  },
  actions: {
    async initBalance() {
      try {
        this.balance = await getBalance();
      } catch (e) {
        console.log(e);
        this.balance = 0;
      }
    },
  },
});

[posva]

remove the getters, you don't need them

Also worth noting that state, getters, and actions names cannot overlap as they are all merged into the store instance (this.*)

[amrap030]

@posva thanks for your reply.

Also worth noting that state, getters, and actions names cannot overlap as they are all merged into the store instance (this.*)

That was my mistake :)

[Leisure-B]

You can use the this.$set function:
this.$set(this, 'balance', 0)