What am I doing wrong when using getters to retrieve state data and display it in a component?
I am very new to vuejs 3 and vuex 4. I'm trying to do something simple like a getter. Since it didn't work for me, I made a console.log to see if the results appeared in the console. The result is this: CompulatedRefImpl {dep: undefined, _dirty: true, __v_isRef: true, effect: ReactiveEffect, _setter: f, ...}... I think I have to implement a ref in the calculation for getting the information from the storage getter, but I don't know what to do in this case.
state: {
title:'hello'
},
getters: {
title: state => state.title
},
<template>
{{title}}
</template>
<script>
import {computed, ref} from 'vue'
import {useStore} from 'vuex'
export default {
name: 'Lista',
setup(){
const store = useStore();
const nuevaSerie = ref("");
let title = ref("");
/* const borrar_todo = async (index) =>{
store.dispatch ('lista/borrar_todo',{
index
})
}
const nueva_serie = async (nombre) =>{
store.dispatch ('lista/nueva_serie',{
nombre
})
}
const colores = async (index) =>{
await new Promise( (aceptar)=>{
setTimeout( ()=>{
aceptar()
},100)
})
store.dispatch ('lista/colores', index)
}*/
title = computed(() => store.getters.title)
console.log(title)
let series = store.state.lista.series
return { series, nuevaSerie, nueva_serie, borrar_todo, colores, title}
}
}
</script>
