Having an issue with state management in Vue3 (Pinia) using the Composition API. I successfully retrieved an array called countryCodes and now I want to copy all items from this array into another array called countries defined in the state. However, when trying to clone the array using forEach method and other methods, I encounter the error "Property 'forEach' does not exist on type 'Readonly<Ref<Readonly>>'". Please note that I am using TypeScript. How can I resolve this error?
export const getAllCityAndCountries = defineStore("main", {
state: () => {
return {
countries: [
{
code: '880',
name: 'Bangladesh',
emoji: '🇧🇩'
}
]
}
},
actions: {
getCountries() {
const { result, error } = useQuery(gql`${getCountryCodes}`,
{
limit: 250,
skip: 0
}
)
let countryCodes = useResult(result, null, data => data.getCountryCodes.result.countryCodes)
countryCodes.forEach(val => this.countries.push(Object.assign({}, val)));
},
}
})