User Tools

Site Tools


Store: store.ts

store.ts
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
import login from './modules/login'
 
export default new Vuex.Store({
    state: {},
    modules: {
        login: login
    }
})

Store module: module/login.ts

login.ts
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
 
@Module
export default class login extends VuexModule {
 
    auth : boolean = false
 
    @Mutation
    login() {
        this.auth = true
    }
 
    @Mutation
    logout() { 
        this.auth = false
    }
 
    @Action
    setLogin() {
        this.context.commit('login')
    }
 
    @Action
    setLogout() {
        this.context.commit('logout')
    }
 
    get isAuth() : boolean {
        return this.auth
    }
}

Client for the store: Login.vue

Login.vue
<template>
   <!-- cutted -->
</template>
 
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator"
import { State, Action, Getter, Mutation } from 'vuex-class'
 
@Component
export default class Login extends Vue {
 
    loginName : string = ''
    password : string = ''
    message : string = ''
    debug : any = ''
 
    @Getter isAuth: boolean
    @Action setLogin: () => void
 
    submitLogin() {
    }
 
    mounted() {
        this.setLogin()
        this.debug = this.isAuth
    }
 
}
</script>

Result with debug output as true

Docs