Question

我正在进行一次登录，响应后，菜单标题会更新，并且应该显示用户名。

菜单将按预期更改，但是直到我自己重新加载页面（F5）时，用户名才会显示。

这是我的代码：

Login.vue

....
<script>
export default {
    data() {
        return {
            email: '',
            password: '',
            type: 1
        }
    },
    methods: {
        login() {
            this.$store.dispatch('retrieveToken', {
                email: this.email,
                password: this.password,
                type: this.type
            })
            .then(response => {
                this.$router.push({name: 'search'});
            })
            .catch(error => {
                console.log(errorMessage);
            })
        }
    }
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        user_id: localStorage.getItem('user_id') || null,
        fname: localStorage.getItem('fname') || null,
        lname: localStorage.getItem('lname') || null,
        email: localStorage.getItem('email') || null,
        type: localStorage.getItem('type') || null,
        token: localStorage.getItem('token') || null
    },
    getters: {
        loggedIn(state) {
            return (state.token == null) ? false : true
        },
        isCustomer(state) {
            return (state.type == 1) ? true : false
        },
        isPartner(state) {
            return (state.type == 2) ? true : false
        }
    },
    mutations: {
        retrieveToken(state, data) {
            state.user_id = data.user_id
            state.fname = data.name
            state.lname = data.name
            state.email = data.email
            state.type = data.type
            state.token = data.access_token
        }
    },
    actions: {
        retrieveToken(context, credentials) {
            let userData = []
            let userCredentials = {
                user_credencial: {
                    email : credentials.email,
                    password: credentials.password,
                    type : credentials.type
                }
            }

            return new Promise((resolve, reject) => {

                axios.post(process.env.VUE_APP_API_AUTH, userCredentials)
                .then(response => { // Credentials resolved
                    let user_id = response.data.objeto.user.id_user,
                        fname = response.data.objeto.profile.f_name,
                        lname = response.data.objeto.profile.l_name,
                        // type = response.data.objeto.user.type,
                        token = response.data.objeto.access_token.token;

                    // Storing Auth data
                    userData.user_id = user_id
                    userData.fname = fname
                    userData.lname = lname
                    userData.type = credentials.type
                    userData.email = credentials.email
                    userData.access_token = token

                    localStorage.setItem('user_id', userData.user_id)
                    localStorage.setItem('fname', userData.fname)
                    localStorage.setItem('lname', userData.lname)
                    localStorage.setItem('email', userData.email)
                    localStorage.setItem('type', userData.type)
                    localStorage.setItem('access_token', userData.access_token)

                    context.commit('retrieveToken', userData)
                    return resolve(response)
                })
                .catch(error => {
                    return reject(error)
                })
            })

        }
    }
})

最后是Header.vue

<ul v-if="isPartner">
  <base-dropdown tag="li">
    <span slot="title">¡Hola, <strong class="text-primary">{{this.$store.state.fname}}</strong>!</span>
  </base-dropdown>
</ul>

<script>
export default {
    computed: {
        isCustomer() {
            return this.$store.getters.isCustomer
        },
        isPartner() {
            return this.$store.getters.isPartner
        }
    }
};
</script>

此外，我尝试在Header.vue中创建一个称为函数名LoggedName的计算函数，以检索用户名，就像我对isCustomer和isPartner所做的一样（以更改显示的菜单），但是我得到了相同的结果：需要F5来显示菜单上的用户名。

有什么主意吗？

Answer 1

在您的retrieveToken突变中，您要将state对象的fname和lname属性都设置为data.name，而您从未在任何地方定义它们：< / p>

retrieveToken(state, data) {
  state.user_id = data.user_id
  state.fname = data.name
  state.lname = data.name
  state.email = data.email
  state.type = data.type
  state.token = data.access_token
}

我认为您只想将它们分别设置为data.fname和data.lname。

$ store.state需要重新加载页面以更新Vuejs

1 个答案: