Javascript 获取程序不更新Vuex中的值

我不明白Getter在Vuex中是如何工作的问题是在状态和本地存储中注销令牌时变为空，但在getter中不是空的。 在

created

中，我称之为：

created: async function () {
    if (this.$store.getters.shortToken) {
      this.isConfirm = true
    }
    console.log(
      'signining', localStorage.getItem('token'), // ''
      'state', this.$store.state.user.token, // ''
      'getter', this.$store.getters.token // 'old-token'
    )
    if (this.$store.getters.token) {
      await this.$router.push({ path: '/' })
    }
  }

和

getter

具有：

token: state => {
    return localStorage.getItem('token') || state.user.token
  }

和变异：

SET_TOKEN: (state, payload) => {
      localStorage.setItem('token', payload.token)
      Object.assign(state, payload)
    }

但是，创建的控制台登录为我提供了空的localStorage令牌（这是正常的）和空的state.token（这也是正常的）。。但是，getters.token给了我令牌（这是不正常的），因为我给了SET_令牌空令牌。为什么会发生这种情况？
PS.如果我在getters令牌中添加

console.log（state.user.token，localStorage.getItem（'token'））

以上

return

，那么

getters.token

创建的

钩子中的
getters.token
是空的为什么？

还有一些在这种情况下使用代码，这是注销方法：

methods: {
    async logout () {
      if (await this.$store.dispatch('logOut')) {
        console.log('logged out')
        await this.$router.push({ path: '/signin' })
      }
    }
  }

操作注销

async logOut (context) {
    console.log('logggog')
    context.commit('SET_TOKEN', {
      token: ''
    })
    context.commit('SET_USER', {
      user: null
    })
    return true
  }

getter用于基于
存储状态
计算
派生状态

您正面临此问题，因为您正在从
Getter
返回
localStorage.getItem（）
的值，该值不是
存储状态的值，因此它既不是
被动的
也不是
可观察的

在您的示例中，当您调用
localStorage.setItem（）

时，Vuex不会重新计算Getter的值
只有当更改了
state.user.token
时，它才会重新计算Getter的值

因此，如果您想让Getter正常工作，只返回
state.user.token的值


您还可以在
App.vue
中添加一个
创建的
钩子，该钩子将检查本地存储中是否有令牌，并调用
SET\u令牌
变异，如果这是您试图通过在Getter中调用
localStorage.getItem
来实现的：

App.vue

<script>
    created() {
        const token = localStorage.getItem('token');
        if (token != null) {
            this.$store.mutations.SET_TOKEN({ token });
        }
    }
</script>

或者如果
有效负载
实际上是
状态。用户
可以执行以下操作：

SET_TOKEN: (state, payload) => {
    localStorage.setItem('token', payload.token);
    state.user = {
       ...payload
    }
}

getter用于基于
存储状态
计算
派生状态

您正面临此问题，因为您正在从
Getter
返回
localStorage.getItem（）
的值，该值不是
存储状态的值，因此它既不是
被动的
也不是
可观察的

在您的示例中，当您调用
localStorage.setItem（）

时，Vuex不会重新计算Getter的值
只有当更改了
state.user.token
时，它才会重新计算Getter的值

因此，如果您想让Getter正常工作，只返回
state.user.token的值


您还可以在
App.vue
中添加一个
创建的
钩子，该钩子将检查本地存储中是否有令牌，并调用
SET\u令牌
变异，如果这是您试图通过在Getter中调用
localStorage.getItem
来实现的：

App.vue

<script>
    created() {
        const token = localStorage.getItem('token');
        if (token != null) {
            this.$store.mutations.SET_TOKEN({ token });
        }
    }
</script>

或者如果
有效负载
实际上是
状态。用户
可以执行以下操作：

SET_TOKEN: (state, payload) => {
    localStorage.setItem('token', payload.token);
    state.user = {
       ...payload
    }
}

非常感谢。我又稍微解决了我的问题。。但是你关于非反应性本地存储的话给了我深刻的印象谢谢。。我又稍微解决了我的问题。。但你关于非反应性本地存储的话让我有了深刻的见解