Adding and Reading Initial State Data

Now that that is all set up, go ahead and add some data to your state object and see how you can use that in your application. You’re going to put the example user object above as part of your state.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: {
      name: 'Billie Joe Armstrong',
      age: 46,
      dob: 'February 17, 1972',
      username: 'billie_joe',
      twitterHandle: '@billiejoe'
    }
  },
  mutations: {
    ...
  },
  actions: {
    ...
  },
});

Note: The values that you hard-code in your state object are the default values. In this case, the default username is “Billie Joe Armstrong.” However, in a real application these values will most likely be empty '', 0, [], or {}, depending on the data type.

Let’s go ahead and get the user’s name into the application...