Question

我有一个登录服务和帐户个人资料页面以及帐户更新表单页面，当我登录时，我从API后端获得了令牌和一个用户，并以突变形式设置了商店中的数据。如果要更新配置文件，请转到“ / profile / edit”页面，然后将表单提交到服务器，如果记录在服务器上得到更新，我将在响应中返回更新的用户记录并设置此新用户对象在商店中，并重定向到“ / profile”中的用户个人资料页面。到目前为止，到目前为止，我可以看到配置文件页面上的帐户属性已更改，但是，当刷新页面时，我得到的是登录后获得的旧用户对象，因此，由于某种原因，新用户并没有在商店中正确设置，我不知道发生了什么。多谢您的协助。这是我的代码：

商店

export default new Vuex.Store({
    state: {
        auth: {
          apiToken: null,
          user: {},
        }
    },
    getters,
    mutations,
  actions
})

登录操作

login({ commit }, payload){
    axios.post('/api/auth/login', payload)
        .then(response => {
            commit('authenticateUser', {
                token: response.data.api_token,
              user: response.data.user
          })
              localStorage.setItem('token', response.data.api_token)
              localStorage.setItem('user', JSON.stringify(response.data.user))

              router.push('/')
        })
        .catch(error => {
            commit('showErrorAlert')
        })
    }

AuthenticateUser突变

authenticateUser(state, payload) {
    state.auth.apiToken = payload.token
    state.auth.user = payload.user
    state.auth.signedIn = true
  }

saveUserProfile操作

saveUserProfile({ commit }, payload){
    axios.patch('/api/users/' + payload.get('id'), payload)
       .then(response => {
           commit('saveUserProfile', response.data)
           router.push('/profile')
      })
      .catch(error => {
          console.log(response)
      })
  }

saveUserProfile突变

saveUserProfile(state, payload){
    state.auth.user = payload
    console.log(state.auth.user)
    # Here I get the updated user from the server with new attribtues
}

在userProfile组件中，我有一个computed属性，可以从商店中获取用户。

<script>
    export default {
      computed: {
          current_user(){
             return this.$store.getters.currentUser;
             # here, after updating the account I get the new user record but when I refresh the page, I get the old record.
          }
       }
     }
</script>

更新帐户后，当我重定向到个人资料页面时，将获得新属性，但刷新页面后，将获得旧数据。这很奇怪，因为我认为VueX将数据保留在内存中。我可以通过登录并在VueX浏览器控制台中检查状态来确认这一点。我可以看到用户记录在那里。例如，如果我随后转到“ / dashboard”，则可以看到用户记录仍然存在。这很奇怪。我做错什么了吗？

更新

currentUser getter

currentUser: state => {
    return state.auth.user
}

VueX无法将数据正确存储在存储中

0 个答案: