如何在 Nuxt 3 中访问中间件内的 useState？

Question

我使用 Nuxt 3 和 useState 来存储用户是否登录。然后在中间件中，如果用户未登录，我想阻止导航。

可组合项/states.ts

export const useAuth = () => useState<boolean>('authenticated', () => false)

中间件/auth.ts

export default defineNuxtRouteMiddleware((to, from) => {

// Doesn't work
const {authenticated} = useState('authenticated');

// Doesn't work
const {authenticated} = useAuth();

if (!authenticated) {
    return abortNavigation();
}
})

正确的做法是什么？我在文档中找不到任何有关在中间件或插件中使用 useState 的内容。

Answer 1

以下几行将帮助您在应用程序中运行默认的 Nuxt 状态

初始化状态

useState("authenticated", () => false);

获取状态值

const isAuthenticated = useState("authenticated");
console.log(isAuthenticated.value)

更新状态值

const isAuthenticated = useState("authenticated");
isAuthenticated.value = true;

现在，经过身份验证的状态值将更改为

true

，并且您可以在任何地方使用

const isAuthenticated = useState("authenticated");

接收此值