Вычисляемое свойство не обновляется при изменении состояния

Question

Мы пытаемся определить, вошел ли пользователь в систему или не использует состояние хранилища vuex: loggedIn. Когда я вызываю службу API из действия, она вызывает mutation после успешного входа в систему и изменяет данные в состоянии:

loginSuccess(state, accessToken) {
    state.accessToken = accessToken;
    state.authenticating = false;
    state.loggedIn = true;
    console.log(state.loggedIn);
  }

Значение console.log() показывает значение, поэтому мутация работает.

В моем другом компоненте я использую вычисляемое свойство, чтобы отслеживать изменения в хранилище, используя ...mapState() и связываю свойство в представлении шаблона:

computed: { 
    ...mapState('authStore',['loggedIn' ]);
  }

Но представление никогда не обновляется на основе вычисляемого свойства. Я проверил, используя инструменты Vue Dev в консоли. Это показывает состояние изменений.

Я инициализировал состояние.

export const states = {
  loggedIn: false
};

Я пытался позвонить штату напрямую.

this.$store.state.authStore.loggedIn;

Я пробовал разные подходы.

...mapState('authStore', { logging:'loggedIn' });
//or
...mapState('authStore',['loggedIn' ]);

также пробовал watch: {} крючок, но не работает.

Интересно, что getter состояния всегда показывает undefined, но свойство состояния изменяется в инструментах разработки.

Не могу понять, что не так или как двигаться дальше.

вот скриншот devtools state после успешного входа в систему:

Answer 1

Это бросается в глаза:

export const states = {
  loggedIn: false
};

Я подозреваю, что вы пытаетесь использовать его примерно так:

const store = {
  states,
  mutations,
  actions,
  getters
}

Это не сработает, потому что это нужноназываться state, а не states.В результате loggedIn будет нереактивным и имеет начальное значение undefined.Любые вычисленные свойства, включая получатель магазина, не будут обновляться при изменении значения.

Независимо от того, верна моя теория или нет, я предлагаю добавить console.log(state.loggedIn); в начале loginSucess, чтобы подтвердить состояние док мутации.