Data 的 getter 能够观察非反应性 localStorage，但不能用于计算？

Question

我有一个部分在用户未通过身份验证时显示 Login 按钮（如 localStorage 中所示），否则将显示 username 和 'logout botton'。

当我将 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 计算的属性将永远 return 相同的值，因为 Vue 缓存了计算属性的值.

在这种情况下，您通常会使用一种方法：

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

尽管您的 getter 也可以。

Data 的 getter 能够观察非反应性 localStorage，但不能用于计算？

Data's getters able to watch non-reactive localStorage, but not for computed?

vue.js

computed-properties

reactive