Using pug & vuetify here.
In the past vuex
was the solution to share state.
In react there are hooks.
create a new file use-login.ts
copy the logic:
const isLoggedIn = ref(false);
const logIn = () => {
isLoggedIn.value = true;
};
wrap in into:
import { ref } from '@vue/composition-api';
export default function useLogin () {
// logic goes here
return {
// what needs to be used
};
}
// use-login.ts
import { ref } from '@vue/composition-api';
export default function useLogin(): { isLoggedIn; logIn } {
const isLoggedIn = ref(false);
const logIn = (): void => {
isLoggedIn.value = true;
};
return { isLoggedIn, logIn };
}
to consume now use:
<template lang="pug">
v-container
h3 Vue Testing
.div {{isLoggedIn ? 'Hello User' : 'Please login' }}
.v-btn(v-if='!isLoggedIn' @click='logIn()') log in
</template>
<script lang="ts">
import useLogIn from './use-login';
export default {
setup() {
const { logIn, isLoggedIn } = useLogIn();
return {
isLoggedIn,
logIn,
};
},
};
</script>
To share the state of the isLoggedIn
variable change the code to:
import { ref } from '@vue/composition-api';
import Vue from 'vue'
import { VueCompositionApi } from '@vue/composition-api';
Vue.use(VueCompositionApi);
const isLoggedIn = ref(false);
export default function useLogin(): { isLoggedIn; logIn } {
const logIn = (): void => {
isLoggedIn.value = true;
};
return { isLoggedIn, logIn };
}