从组件调用Vuex映射状态时未定义

Question

所以，每次vuex中的状态不为null时，我都试图更新组件中的一些数据。我用laravel设置了一个API路由，在用户登录后返回用户信息。

API路线：

Route::group(['middleware' => ['auth:api']], function () {
    Route::get('profil', 'Api\UserController@profil')->name('profile'); // will returning user info
}

Vuex：

export default new Vuex.Store({
    state: {
        token: localStorage.getItem('token') || "",
        user: {}
    },
    getters: {
        isAuth: state => {
            return state.token != "" && state.token != null
        }
    },
    mutations: {
        SET_TOKEN(state, payload) {
            state.token = payload
        },
        SET_AUTH_USER(state, payload) {
            state.user = payload
        }
    }
})

所以在我的应用程序中。vue，在created方法中，如果令牌存在，我将使用http响应作为有效负载提交SET_AUTH_USER。

应用程序。vue：

<template>
  <div id="app-layout">
    <section-advices></section-advices>
</template>

<script>
    import SectionAdvices from "./SectionAdvices"


    export default {
        name: "app-layout",
        components: {
            SectionAdvices
        },
        created() {
            if (this.$store.state.token !== (null || "")) { //check token in vuex state
                this.$http
                    .get("/profil")
                    .then(res => {
                        if (res.status === 200) {
                            this.$store.commit("SET_AUTH_USER", res.data.data); //set $store.state.user with response
                        } else {
                            this.$store.commit("SET_AUTH_USER", null); // set with null
                        }
                     })
                     .catch(err => {
                         console.log(err);
                     });
            }
        }
    }
</script>

到目前为止，一切正常。每次我刷新页面，只要我的本地存储中有一个令牌，用户对象将永远拥有用户信息。

部分建议。vue：

<template>
    <section class="advices">
        <input type="text" v-model="name">
        <input type="text" v-model="email">
    </section>
</template>

<script>
    import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
        export default {
            name: "section-advices",
            data(){
                return{
                    name: null,
                    email: null
                }
            },
            computed:{
                ...mapState(["user"]),
                ...mapGetters(["isAuth"]),
            },
            created() {
                if(this.isAuth) { //its returning true. the codes below was executed
                    this.name = this.user.name // gives name data with "undefined"
                    this.form.email = this.user.email // it's "undefined" too
                 }
             }
        }
</script>

SectionAdvisions组件中的名称和电子邮件都设置为“未定义”，尽管在Vue开发工具中，用户对象确实具有这些值。我是否在应用程序中调用了api。vue在错误的生命周期内？

Answer 1

我找到了解决方案，那就是：

正如@dreijntjens所建议的，我在我的“部分dvices.vue”中添加了观察者

...
watch: {
    // watching for store.state.user changes
    user: {
        handler: "fillForm", // call the method
        immediate: true // this watcher will exec immediately after the comp. created
    }
 },
 methods: {
    fillForm() {
        if(this.isAuth) { // this is not necessary, just want to make sure. Once isAuth === true, codes below will be executed
            this.form.name = this.user.name
            this.form.email = this.user.email
        }
    }
 }

所以，真正的问题是，什么时候。vue创建并获取数据，存储。状态用户仍然是一个空对象。我的API调用在此步骤之后运行，这是毫无意义的。所以，我确实需要watcher来查看用户状态中的任何更改，并在此之后更新其组件中的本地数据。

Answer 2

可以尝试使用getter获取状态数据吗？因为生命周期。组件页面呈现时，首先设置getter