Прошу поправить мой код, потому-что typescript окончательно сломал мой мозг.
Сначала напишу правильный вариант
<template>
async createUser() {
try {
await this.$fire.auth.createUserWithEmailAndPassword('foo@foo.foo', 'test')
} catch (e) {
alert(e)
}
}
</template>
<script lang="ts">
import Vue from 'vue'
import { mapState, mapGetters } from 'vuex'
export default Vue.extend({
computed: {
...mapState({
authUser: (state: any) => state.authUser,
}),
...mapGetters({
isLoggedIn: 'isLoggedIn',
}),
},
// fetch() {
// // INFO -> this.$fire.auth user etc. are accessible
// // INFO -> this.$store.state.authUser is accessible even on server-side
// },
data: () => ({
formData: {
email: '',
password: '',
},
}),
methods: {
async createUser() {
try {
await this.$fire.auth.createUserWithEmailAndPassword(
this.formData.email,
this.formData.password
)
} catch (e) {
alert(e)
}
},
async signInUser() {
try {
await this.$fire.auth.signInWithEmailAndPassword(
this.formData.email,
this.formData.password
)
} catch (e) {
alert(e)
}
},
async logout() {
try {
await this.$fire.auth.signOut()
} catch (e) {
alert(e)
}
},
},
})
</script>
Я честно переписываю это на ts канву
<script lang="ts">
import { Vue, Component, Prop, namespace } from 'nuxt-property-decorator'
const user = namespace('users')
@Component
export default class Login extends Vue {
let infoData = { activeLogin: false, email: '', password: '', remember: false }
public localData: infoData
/*
{
activeLogin: false,
email: '',
password: '',
remember: false
}
*/
async createUser() {
try {
await this.$fire.auth.createUserWithEmailAndPassword(
this.localData.email,
this.localData.password
)
} catch (e) {
alert(e)
}
}
async signInUser() {
try {
await this.$fire.auth.signInWithEmailAndPassword(
this.localData.email,
this.localData.password
)
} catch (e) {
alert(e)
}
}
async logout() {
try {
await this.$fire.auth.signOut()
} catch (e) {
alert(e)
}
}
@user.State
public authUser!: boolean
@user.Getter
public isLoggedIn!: string //'isLoggedIn'
// public updateUserInfo!: object
mounted() {
this.localData = { ...this.localData, ...this.infoData }
}
}
</script>
Результат - typescript ругается на всё подряд
Файл /store/users.ts
import { Module, VuexModule, Mutation } from 'vuex-module-decorators'
// state, getter, mutations ts
interface UserData {
id: number,
email: string,
phone: string,
password: string,
firstname: string,
lastname: string
}
@Module({
name: 'users',
stateFactory: true,
namespaced: true
})
export default class User extends VuexModule {
public authUser: boolean
public info: UserData = {
id: 1,
email: '',
phone: '0000000000',
password: '',
firstname: '',
lastname: ''
}
get fullName(): string {
return this.info.firstname + ' ' + this.info.lastname
}
@Mutation
public updateUserInfo(data: UserData) {
this.info = { ...this.info, ...data }
}
}
Помогите вернуть ясность кода! Ну понять мне что пишу нетак
Средний
