I'm pretty much new to vuejs 3 and vuex 4. I'm trying to do something as simple as a getter. Since it didn't work for me, I made a console.log to see if the result appeared in the console. What came up was this: ComputedRefImpl {dep: undefined, _dirty: true, __v_isRef: true, effect: ReactiveEffect, _setter: ƒ, …}... I think that I have to implement ref in the computed that I use to get the information from the store 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>I finally found the error. The way to call the store getter was wrong. I clarify that 'lista' is the name of the module
<script>
let title = computed(() => $store.getters["lista/title"])
</script>