I've run into some challenges with Typescript and Vue3. It seems like I might be using Typescript incorrectly in this case.
I set up a store using Vue's Composition API.
import {computed, reactive} from "vue";
const state = reactive({
accessToken: undefined,
user: {},
})
const isAuthenticated = computed(() => {
return state.accessToken !== undefined
})
export default {
state: readonly(state),
isAuthenticated
}
I also created a type or interface for it:
import {ComputedRef} from "vue";
export interface UserStore{
state: Readonly<any>;
isAuthenticated: ComputedRef<boolean>;
}
However, when I try to use it in my Vue component,
such as in the following example:
<h1 v-if="userStore.isAuthenticated">is true</h1>
It returns true even when it should clearly be false.
I inject the store using the inject function:
setup(){
return {
userStore: inject('userStore') as UserStore
}
}
A similar issue arises when attempting to return a computed string. It gets wrapped in quotation marks when used in a template.
What could be causing this issue?
#edit I am providing the UserStore in main.ts
/* Stores */
import UserStore from './store/user-store'
const app = createApp(App)
.use(IonicVue, {
mode: 'ios'
})
.use(router)
.provide('userStore',UserStore);
router.isReady().then(() => {
app.mount('#app');
});