Question

我试图从Vuex getter获取当前登录用户的ID，并将其传递到路由器链接，但是即使我console.log它并显示合法的用户ID，也不知为何它仍未定义。在我的模板中。在这里，我遍历了一系列保留路径名称的对象：

<v-list dark class="mt-5 userList" style="background: #515151;">
            <v-list-item
                    v-for="item in sideBar"
                    :key="item.title"
                    class="tile"
            >
                <router-link :to="item.route">
                    <span class="userIcon">
                        <v-list-item-icon>
                                <v-icon style="color: #FFA255">{{ item.icon }}</v-icon>
                        </v-list-item-icon>
                    </span>

                    <span class="userTitle">
                        <v-list-item-content>
                            <v-list-item-title style="color: #FFA255">
                                {{ item.title }}
                            </v-list-item-title>
                        </v-list-item-content>
                    </span>
                </router-link>
            </v-list-item>
        </v-list>

我认为这部分说明了我的脚本部分：

export default {
    data() {
        return {
            userParams: null,
            sideBar: [
                {title: 'User', icon: 'note', component: 'UserInfo', route: `/user/${this.userParams}`},
                {title: 'Rated albums', icon: 'note', component: 'Rated', route: `/user/${this.userParams}/rated`},
                {title: 'Owned', icon: 'favorite', component: 'Owned', route: `/user/${this.userParams}/owned`},
                {title: 'Settings', icon: 'settings', component: 'Settings', route: `/user/'${this.userParams}'/settings`},
            ],
        }
    },

    computed: {
        ...mapGetters([
            'getUserId'
        ])
    },


    created() {
        this.userParams = this.getUserId;
        console.log(this.userParams)
    },
}

我的router.js

{
        path: '/user/:id',
        component: User,
        children: [
            {
                path: '/',
                component: UserInfo,
                name: 'userInfo'
            },
            {
                path: 'owned',
                component: Owned,
                name: 'owned'
            },
            {
                path: 'rated',
                component: Rated,
                name: 'rated'
            },
            {
              path: 'settings',
              component: Settings,
                name: 'settings'
            }
        ],
        beforeEnter (to, from, next) {
            if(authStore.state.idToken) {
                next()
            } else {
                next('/signin')
            }
        }
    },

Answer 1

使const { ipcRenderer } = require('electron');为计算属性，以便在sideBar更改时重新评估它。

我也没有理由在getUserId中保留getUserId的副本。

userParams

目前，您的computed: { ...mapGetters([ 'getUserId' ]), sideBar () { const params = { id: this.getUserId } // this is reactive return [{ title: 'User', icon: 'note', route: { name: 'userInfo', params } }, { title: 'Rated albums', icon: 'note', route: { name: 'rated', params } }, { title: 'Owned', icon: 'favorite', route: { name: 'owned', params } }, { title: 'Settings', icon: 'settings', route: { name: 'settings', params } }] } },字符串仅在创建组件时计算一次

从vuex获取时，vue路由器ID不确定

1 个答案: