Vuex (https://vuex.vuejs.org/guide/) is the official state management solution for Vue.js and is Redux inspired. JHipster uses Vuex for state management with Vue.js. It is also possible to use other state management solutions such as Redux and MobX.

Vuex provides a global immutable store that can only be updated by committing mutations explicitly. The store is also reactive, which means the components that use the store data are updated when the store changes. A mutation is a method that changes data in the store. You need to call the store commit method with the required mutation.

Vue components automatically get access to the store when you connect a store to an app. Let's take a look at src/main/webapp/app/core/home/home.component.ts:

@Component
export default class Home extends Vue {
  @Inject('loginService')
  private loginService: () => LoginService;

  public openLogin(): void {
    this.loginService().openLogin((<any>this).$root);
  }

  public get authenticated(): boolean {
    return this.$store.getters.authenticated;
  }

  public get username(): string {
    return this.$store.getters.account ? this.$store.getters.account.login : '';
  }
}

As you can see, the component has $store as an instance variable. The stores that are used are defined under src/main/webapp/app/shared/config/store.