What am I doing wrong when using getters to retrieve state data and display it in a component?

Question

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>

Answer 1

Finally found the error. The way you are calling the store getter is wrong. I clarified that "lista" is the name of the module

sssccc