Vue.js 2 Web Development Projects

Storing the user in a centralized state

We will store the user data inside a state object like we did in Chapter 3, Project 2 - Castle Duel Browser Game, so we can access it in any component of the app:

1. Create a new state.js file next to main.js, which exports the state object:

      export default {        user: null,      }

The user property will be null when no user is logged in, or else it will contain the user data.

2. Then, in the main.js file, import the state:

      import state from './state'

3. Then, use it as the data of the root instance so Vue makes it reactive:

      new Vue({        el: '#app',        data: state,        router,        render: h => h(AppLayout),      })