Getters work like computed properties for the store. They are functions that take the state and the getters as arguments, and return some state data:

1. Let's create a user getter that returns the user held by the state:

      const store = new Vuex.Store({
        // ...
        getters: {
          user: state => state.user,
        },
      })

2. In our AppMenu component, we can use this getter instead of accessing the state directly:

      user () {
        return this.$store.getters.user
      },

This doesn't seem to be different from before. But accessing the state directly isn't recommended--you should always use getters since it allows you to modify the way you get the data without having to change the components using it. For example, you can change the structure of the state and adapt the corresponding getters without having an impact on the component.

3. Let's also add a userPicture getter that we will implement later when we have the real Google profile:

      userPicture: () => null,

4. In the AppMenu component, we can already use it:

      userPicture () {
        return this.$store.getters.userPicture
      },