I am currently in the process of transitioning a project from Vue 2 options API to Vue 3 composition API.
Within an options API component, there is a variable named componentData. I am calling a mixin from this component, which allows me to access all the component's variables inside the mixin. Here is an example:
//myMixin.js
export default {
methods: {
data_changed() {
//where componentData is declared in the component
console.log(this.componentData)
this.componentData = [1, 2, 3]
},
data() {
return {
someVar: null
}
}
}
However, I am facing difficulties replicating the same behavior with the composition API in Vue 3. Instead of mixins, I am using composables. Consider a scenario where I declare a variable in a component:
import { ref } from 'vue'
import { testData } from '../mixins/useData.js'
export default {
setup() {
const componentData = ref([])
testData()
}
}
And my composable useData.js:
export function testData() {
console.log(componentData.value) //undefined
componentData.value = [1, 2, 3] //will throw error
}
In this case, the composable will output as undefined. How can I access the component's data without passing them as function parameters? Is it because Vue 3 composables are designed to only return a value and do not work the same way as mixins? Can the value of componentData be altered from the composable?