我试图从vuex向laravel提交一个表单,并向localStorage注册一个令牌。
在我的表单中,我有一个submit方法,它将数据发送到store,js actions。
该表单是一个注册表单,我能够捕捉到后端的详细信息。我也从后端验证获得反馈
比如说
{"success":true,"data":{"name":"saf,jdfn","token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzIiwianRpIjoiYjc2ZDgzNjUzNDg0ZDA4OGRiMjMyOTIxZjViNjc3YzlkN2Q0ZeMbU31lGkD8pirH1JtQr1ZKL1S6eYuscQUUhKOnFodEum3Z4G1gGyHJ27UK1KzjnL3M"},"message":"Yay! A user has been successfully created."}
我还希望将访问令牌存储到localStorage
<template lang="en">
<div class="body">
<div class="cont">
<v-form
ref="form"
class="form sign-in"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="form.name"
:counter="10"
outlined
:rules="nameRules"
label="Name"
required
></v-text-field>
<v-text-field
v-model="form.email"
:rules="emailRules"
label="E-mail"
outlined
required
></v-text-field>
<v-text-field
v-model="form.password"
outlined
type="password"
:rules="passRules"
label="Password"
required
append-icon="mdi-map-marker"
></v-text-field>
<v-text-field
v-model="form.confirm_password"
outlined
type="password"
:rules="passRules"
label="confirm password"
required
append-icon="mdi-map-marker"
></v-text-field>
<v-btn
:disabled="!valid"
color="success"
class="submit mr-8"
@click="submit"
>
Submit
</v-btn>
</v-form>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
form:{
name: '',
email: '',
password: '',
confirm_password: ''
},
valid: true,
name: '',
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],
email: '',
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
],
password: '',
passRules: [
v => !!v || 'Password is required',
v => (v && v.length >=8 ) || 'Name must be atleast 8 characters',
],
}),
methods: {
async submit () {
await this.$refs.form.validate();
this.$store.dispatch('registerUser', this.form);
},
},
}
</script>
在我的store.js中,我有以下代码
actions: {
registerUser:(context, form) => {
axios.post('/api/register', form)
.then(
res=> {
this.res = res.data;
if(res.data.token){
localStorage.setItem(
'token',
res.data.token
)
}
}
) .catch(
err => {
console.log(err)
}
)
console.log(this.form)
},
无法将令牌获取到本地存储
1条答案
按热度按时间dxxyhpgq1#
首先,我建议你看一下vuex和javascript作用域的主题,据我所知,你的问题是javascript作用域,你不需要使用vuex只是为了保存令牌到本地存储。
操作