I'm currently working on a feature that toggles between a sign-in and sign-out button based on the user's login status. While I can successfully achieve this using v-if, I am encountering an issue where a page refresh is required to see the toggle take effect. For example, after signing out, the 'logout' button remains visible until the page is reloaded, at which point it changes to 'login'.
Below is the template code:
<div v-if="signedIn">
<v-btn class="ml-4 mr-4 primary" @click="logout">
<span>Sign Out</span>
<v-icon>mdi-logout</v-icon>
</v-btn>
</div>
<div v-else>
<v-btn class="ml-4 mr-4 primary" @click="$router.push('/login')">
<span>Sign In</span>
<v-icon>mdi-login</v-icon>
</v-btn>
</div>
And here is the JavaScript code snippet:
data() {
return {
drawer: true,
signedIn: this.$store.getters.isLoggedIn || false,
};
},
I would like to know the Vue way of handling this toggle without requiring a page refresh. As a newcomer to Vue, I believe there must be a more efficient way to accomplish this but most tutorials I come across do not provide clear guidance. Any tips, advice, or suggestions would be greatly appreciated!
Edit
Store:
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
status: '',
token: localStorage.getItem('token') || '',
user: {},
},
mutations: {
auth_request(state) {
state.status = 'loading';
},
auth_success(state, token, user) {
state.status = 'success';
state.token = token;
state.user = user;
},
// Additional mutations omitted for brevity
},
actions: {
login({ commit }, user) {
// Implementation details omitted for brevity
},
logout({ commit }) {
// Implementation details omitted for brevity
},
// Additional actions omitted for brevity
},
getters: {
isLoggedIn: state => !!state.token,
authStatus: state => state.status,
},
});