Получатели данных способны наблюдать нереактивное localStorage, но не для вычислений?

Question

У меня есть раздел, в котором отображается кнопка Login, когда пользователь не аутентифицирован (как показано в localStorage), в противном случае будет отображаться username и «выход из системы».

Код работает, когда я помещаю authenticated внутри блока data. Однако, если я поставлю его в поле computed, оно всегда показывает login

#template
          <router-link v-if="!authenticated" to="login">Log In</router-link>
          <template v-else>
            Logged in as {{username}}
            <button @click="logout">Log out</button>
          </template>

#script
    data: function() {
      return {
        // get authenticated() {  //this works
        //   return localStorage.getItem('authenticated');
        // },
      }
    },
    computed: function() {
      return {
        authenticated: function() {  //this does not work
          return localStorage.getItem('authenticated');
        }
      }
    },

Answer 1

Vue не может наблюдать изменения в локальных элементах хранения, поэтому вычисленное свойство authenticated всегда будет возвращать одно и то же значение, поскольку Vue кэширует значения вычисляемых свойств.

In В этом сценарии вы обычно используете метод:

methods: {
  authenticated() {
    return localStorage.getItem('authenticated')
  }
}

, хотя ваш геттер тоже будет работать.