安装pinia
yarn add pinia @pinia/nuxt
# 或者使用 npm
npm install pinia @pinia/nut
安装pinia-plugin-persistedstate
npm : npm i pinia-plugin-persistedstate
yarn : yarn add pinia-plugin-persistedstate
nuxt工程代码中注册插件plugins\pinia.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.$pinia.use(piniaPluginPersistedstate)
})
配置nuxt.config.ts中的modules
modules: [
'@pinia/nuxt'
],
定义一个stores\user.ts
import { defineStore, } from 'pinia'
const { userApi } = useApi();
export interface UserState {
isLogin: Boolean,
userInfo: Object
}
// useStore 可以任意,比如 useUser, useCart
// 参数1是整个应用中唯一的store id
export const userStore = defineStore('user', {
state: (): UserState => ({
isLogin: false,
userInfo: {}
}),
actions: {
// 登录
async getUserInfo(params: any) {
const { data } = await userApi.getLogin(params)
this.isLogin = true
this.userInfo = data
},
},
persist: process.client && {
storage: localStorage,
paths: ['isLogin','userInfo']
}
})
login.vue
<template>
<div class="login_container">
<div class="login_box">
<el-form
:label-position="labelPosition"
label-width="100px"
:model="loginForm"
style="max-width: 460px"
>
<el-form-item label="用户名" prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入用户名"
type="text"
/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
import { userStore } from "~/stores/user";
const loginForm = reactive({
username: "",
password: "",
});
const submitForm = async () => {
const user = userStore();
await user.getUserInfo(loginForm).then((result) => {
console.log(result)
navigateTo("/");
}).catch((err) => {
});
};
</script>
<style lang="scss" scoped>
.login_container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.login_box {
height: auto;
background-color: #fff;
padding: 40px 50px;
}
}
</style>