I encountered an unexpected outcome when using the loginString() function in my template. It seems that there is a need to include .value in templates, which I thought wasn't necessary.
{ "_dirty": true, "__v_isRef": true, "__v_isReadonly": true }
Below is the code snippet:
App.vue
<template>
<div>{{ language }}</div>
<div>{{ login }}</div>
<div>{{ loginString() }}</div> <!-- Issue is here -->
</template>
<script setup>
import { computed } from 'vue'
import store from './store.js'
import useLanguage from './useLanguage.js'
const { loginString } = useLanguage()
let language = computed(() => store.state.language)
let login = computed(() => store.state.languages[language.value]['translations']['Login'])
</script>
and useLanguage.js
import store from './store.js'
import { computed } from 'vue'
function useLanguage()
{
function loginString()
{
let language = computed(() => store.state.language)
let login = computed(() => store.state.languages[language.value]['translations']['Login'])
return login
}
return { loginString }
}
export default useLanguage
An my store.js
import { createStore } from 'vuex'
export default createStore({
state()
{
return {
language: 'en',
languages: {
"es": {
"lang_short": "es",
"lang_long": "espanol",
"translations": {
"Login": "Benga, venga!",
"Welcome Back": "Opa! Muy amigos!",
}
},
"en": {
"lang_short": "en",
"lang_long": "english",
"translations": {
"Login": "login",
"Welcome Back": "Welcome",
}
},
},
}
},
})