Vuex 模块状态在 Vue 路由器中有默认值

Question

我将 Vue3 与 vuex 和 vue-router 一起使用。我从头开始，刚刚创建了 Vue3 应用程序。 我的想法是创建某种身份验证。想法是如果用户成功登录，作为响应，我将获得令牌，并且我将使用此令牌设置 cookie。然后在应用程序中我将检查是否设置了令牌我将获取用户数据并将它们添加到商店，如果未设置令牌，则某些页面应该不可用，因为用户未通过身份验证。计划是在 router/index.js 中添加路由器保护。当我想使用商店中的某些东西时，值是默认值，我不知道应该在应用程序中的哪里获取我在获取后更新了值的数据？

在主 js 文件中，我正在获取用户数据。 ma​​in.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

store.dispatch('users/getUser')

const app = createApp(App)

app.use(store).use(router).mount('#app')

users.js 是我有 getUser 操作的 vuex 模块。当我在这里进行控制台日志时，我得到了所有数据，这很好。

import axios from 'axios'

export const users = {
  namespaced: true,
  state: {
    user: {
      id: null,
      firstName: null,
      lastName: null,
      email: null
    }
  },

  getters: {
    getFirstName: (state) => state.user.firstName
  },

  mutations: {
    UPDATE_USER_FIRST_NAME: (state, newValue) => { state.user.firstName = newValue }
  },

  actions: {
    async getUser ({ commit, state }) {
      axios.post('http://localhost:8080/api2/getUser.php', {
        token: 'aa8527d2184aa9396cffd282af410dc1b02c4427d703b90cf72e7f80881e9f01eb8ddd656c49d76680ad59fc30f3a3b565654f174cfe17a5341a30bd5f930e53'
      }).then((response) => {
        commit('UPDATE_USER_FIRST_NAME', response.data.firstName)
        console.log('response:', response.data)
      })
    }
  },
  modules: {
  }
}

当我在这里执行控制台日志时，值为空（默认值）。 路由器/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import store from '../store'

console.log(store.getters['users/getFirstName'])

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/categories',
    name: 'Categories',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Categories.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在 store 文件夹中，我有 modules 文件夹，现在只有 users.js 模块。 store/index.js

import { createStore } from 'vuex'
import { users } from './modules/users'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    users
  }
})

Answer 1

main.js

您需要等待调度解决。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

store.dispatch('users/getUser')
 .then(() => {
  app.use(store).use(router).mount('#app');
});

或者将调度包装在async 函数中。还有await 调度本身。