## Composition (Composable functions)

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:  

```ts
const isLoggedIn = ref(false);

const logIn = () => {
  isLoggedIn.value = true;
};
```

wrap in into:
```ts
import { ref } from '@vue/composition-api';
export default function useLogin () {
 // logic goes here
 return {
   // what needs to be used
 };
}
```


```ts
// 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:

```ts
<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>
```

## State Management
To share the state of the `isLoggedIn` variable change the code to:
```ts
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 };
}
```