Implementing state management with Vue.js

Question

Implementing state management with Vue.js

After creating a login page and setting conditions to display different NAVBARs based on the user's login status, I encountered an issue where the rendering seemed to be delayed. In the login process, I utilized local storage to store a token for authentication purposes. However, I was puzzled as to why the rendering behavior was delayed in displaying the appropriate NAVBAR.

Below is an excerpt from my code in app.vue:

<v-main>
     <NavA v-if="token==='' "/> // Display Nav A if not logged in
     <NavB v-if="token!='' "/> // Display Nav B if login successful
      <router-view />
</v-main>

data: () => ({
    drawer: true,
    token: '',
  }),

  mounted () {
      this.token = localStorage.getItem('token')
  },

javascript vue.js vuex

Answer 1

Answer №1

Try replacing the word "mounted" with "created", it might make a difference.

Answer 2

Try replacing the word "mounted" with "created", it might make a difference.

Answer 3

Answer №2

It is recommended to always implement the if-else condition.

<v-main>
   <NavA v-if="token == null "/> //display if not logged in
   <NavB v-else /> // display on successful login
   <router-view />
</v-main>

data: () => ({
  drawer: true,
  token: null,
}),

mounted () {
   this.token = localStorage.getItem('token')
},

This approach is effective for me. Take a look at it in Sandbox.

https://codesandbox.io/s/charming-aryabhata-pl2k4?file=/src/App.vue

Answer 4

It is recommended to always implement the if-else condition.

<v-main>
   <NavA v-if="token == null "/> //display if not logged in
   <NavB v-else /> // display on successful login
   <router-view />
</v-main>

data: () => ({
  drawer: true,
  token: null,
}),

mounted () {
   this.token = localStorage.getItem('token')
},

This approach is effective for me. Take a look at it in Sandbox.

https://codesandbox.io/s/charming-aryabhata-pl2k4?file=/src/App.vue

Answer 5

Answer №3

One alternative is to utilize the beforeMount hook instead of relying solely on the mounted hook.

Answer 6

One alternative is to utilize the beforeMount hook instead of relying solely on the mounted hook.

Implementing state management with Vue.js

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing a single v-model for several elements

Tips for resolving the issue: "Encountered error loading module script..." in Angular 8 and Electron 5

Guide on transferring control from a successful jQuery event to an HTML form

Intersecting realms document

Is there a way to properly structure a JSON file for easy reading on localhost

Searching for a name in JSON or array data using jQuery can be accomplished by utilizing various methods and functions available

Retrieving custom data attributes from slides within a slick carousel

Altering iframe Content with the Help of Selenium Web Driver

Using jQuery to change date format from mm/dd/yy to yyyy-dd-mm

Using AJAX along with the append method to dynamically add identical HTML content multiple times to a single element

Why won't setInterval function properly with innerHTML?

JavaScript: Collection of Pictures

The issue that arises is that only the initial button is able to successfully trigger the opening of

Using Angular to open a modal by invoking the href function

Why use getElementById(id) to obtain an element in JavaScript when it already exists in the JS?

Modify the href attribute of an anchor tag that does not have a specified class or

When using Vue, the image element may not display the value stored in the object property

What is the proper way to include a closing tag for the canvas in a Canvas rendered by Three.js

What are the steps for creating a JSON array in JavaScript?

Navigate through a list of data in JSON format