从 vuex 获取时，Vue 路由器 ID 未定义

Question

我试图从 Vuex getters 获取当前登录用户的 ID 并将其传递到路由器 link，但不知何故它变得未定义，即使我 console.log 它显示合法用户身份。在我的模板中。在这里，我遍历了一个对象数组，其中我保留了我的路线名称：

<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

将 sideBar 计算为属性，以便在 getUserId 更改时重新计算。

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

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 }
    }]
  }
},

目前，您的 route 字符串仅在创建组件时计算一次

从 vuex 获取时，Vue 路由器 ID 未定义

Vue router id gets undefined when taken from vuex

router

vue.js

vuex