vueAuth.isAuthenticated() getter not behaving reactively

[sloane-shark]

Should a Vuex getter dependent upon vueAuth.isAuthenticated() behave reactively? The docs led me to believe yes, but when I go through the login flow, my getter does not update. I have to force a page reload (then the getter updates correctly), and then my Vuex store is wiped out and my user data is gone.

// store/auth.js
...
const vueAuth = new VueAuthenticate(Vue.prototype.$http, {
  baseUrl: 'http://localhost:8081',
  storageType: 'cookieStorage',
  providers: {
    facebook: {
      clientId: 'XXX',
      redirectUri: 'http://localhost:8080/login',
    },
  },
});
...

// store/getters.js
...
const getters = {
  isAuthenticated() {
    return vueAuth.isAuthenticated();
  },
};
...

// store/actions.js
...
const actions = {
  logIn({ commit }) {
    vueAuth.authenticate('facebook')
      .then(() => {
        axios.get('https://graph.facebook.com/v2.11/me', {
          params: { access_token: vueAuth.getToken() },
        }).then((res) => {
          commit(types.mutation.SET_USER, { name: res.data.name });
          commit(types.mutation.SET_LOGGED_IN);
        }).catch((err) => {
          // eslint-disable-next-line
          console.log(err);
          commit(types.mutation.SET_LOGGED_OUT);
        });
      });
  },
};
...

// component.vue
<template>
...
    section
      a(@click='logIn' v-if='!isAuthenticated') Log In
      a(v-if='isAuthenticated') {{ user.name }}
...
</template>
<script>
...
  computed: {
    ...mapGetters(['isAuthenticated']),
  },
...
</script>

[sloane-shark]

I changed to using a state property with a mutation and that worked.

[henritoivar]

Maybe remove it from the docs? Getter property will only be reactive if it depends on state.