I am relatively new to vuejs 3 and vuex 4. I'm currently attempting to create a simple getter, but when it didn't work as expected, I resorted to using console.log to check the output. The result that appeared in the console was: ComputedRefImpl {dep: undefined, _dirty: true, __v_isRef: true, effect: ReactiveEffect, _setter: ƒ, …}... I believe I need to implement ref in the computed function used to fetch data from the store getter, but I am unsure about how to proceed in this scenario.
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>