Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Typescript Vuex Module
import axios, { AxiosRequestConfig } from "axios";
import router from "@/router"; //shortcut to src
import { Module } from "vuex";
const authModule: Module<any, any> = {
state: {
loggedIn: false,
loginError: null,
username: null
},
getters: {
humanLoginError(state: any) {
return state.loginError || "";
}
},
mutations: {
loggedIn(state: any, payload) {
state.loggedIn = true;
state.loginError = null;
state.username = payload.username || "";
router.push("/");
},
loggedOut(state: any) {
state.loggedIn = false;
router.push("/login");
},
loginError(state: any, payload) {
state.loginError = payload;
}
},
actions: {
async login({ commit }, payload) {
commit("changeAppLoadingState", true);
var formData = new FormData();
formData.append("username", payload.name);
formData.append("password", payload.pwd);
axios({
method: "post",
url: "/auth/login",
data: formData
})
.then(response => {
commit("loggedIn", { username: response.data.name });
commit("changeAppLoadingState", false);
})
.catch(error => {
commit("loginError", error.response.data || "GENERAL_ERROR");
commit("changeAppLoadingState", false);
});
},
async logout({ dispatch, commit }) {
axios({
method: "post",
url: "/auth/logout"
})
.then(response => {
commit("clearNavigationState");
commit("loggedOut");
})
.catch(error => {
commit("clearNavigationState");
commit("loggedOut");
});
}
}
};
export default authModule;
import { Module } from "vuex";
import BreadCrumbItem from "@/classes/BreadcrumbItem";
const navigationModule: Module<any, any> = {
state: {
currentPosition: null,
breadcrumb: []
},
getters: {},
mutations: {
addLevelToNavigation(state: any, item: BreadCrumbItem) {
if (state.currentPosition) {
state.breadcrumb.push(state.currentPosition);
}
state.currentPosition = item;
},
removeLevelFromNavigation(state: any) {
state.currentPosition = state.breadcrumb.pop();
},
clearNavigationState(state: any) {
state.currentPosition = null;
state.breadcrumb = [];
}
},
actions: {}
};
export default navigationModule;
import Vue from "vue";
import Vuex from "vuex";
import storage from "vuejs-storage";
import auth from "./modules/auth";
import navigation from "./modules/navigation";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
auth,
navigation
},
state: {
isAppLoading: false
},
mutations: {
changeAppLoadingState(state: any, appLoadingState) {
state.isAppLoading = appLoadingState;
}
},
actions: {},
plugins: [
storage({
namespace: "test_session",
storage: window.sessionStorage,
keys: [
"auth.loggedIn",
"navigation.breadcrumb",
"navigation.currentPosition"
]
}),
storage({
namespace: "test_local",
keys: ["auth.username"]
})
]
});
@Emobe

This comment has been minimized.

Copy link

Emobe commented Feb 14, 2020

Putting any everywhere defeats the purpose of typescript

@AndreaMinato

This comment has been minimized.

Copy link
Owner Author

AndreaMinato commented Feb 14, 2020

It was just an example made to expose a problem with a library, it is not meant to explain how you should use vuex nor typescript.
To make it quick I just wrote any to avoid losing time on useless thing for the use it had.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.