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

Question

我正在将Vue3与vuex和vue-router一起使用。我从头开始，刚刚创建了Vue3应用程序。我的想法是创建某种身份验证。想法是，如果用户成功登录，作为回应，我将获得代币，并用这个代币设置cookie。然后在应用程序中，我会检查是否设置了令牌，我会获取用户数据并将其添加到存储中，如果没有设置令牌，则一些页面应该不可用，因为用户没有经过身份验证。计划是在router/index.js中添加router-guard。当我想使用商店中的东西时，值是默认的，我不知道我应该在哪里提取应用程序中的数据，我在提取后更新了值？

在主js文件中，我正在获取用户数据。main.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是vuex模块，我在其中执行getUser操作。当我在这里做控制台日志时，我会得到所有数据，这很好。

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: {
}
}

当我在这里进行控制台日志记录时，值为null(默认值(。router/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

在商店文件夹中，我有模块文件夹，现在只有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是调度本身。