Skip to content

Instantly share code, notes, and snippets.

@AndreaMinato
Last active June 20, 2023 00:55
Show Gist options
  • Save AndreaMinato/acf06c8d3f8186e0681119d4b540eb02 to your computer and use it in GitHub Desktop.
Save AndreaMinato/acf06c8d3f8186e0681119d4b540eb02 to your computer and use it in GitHub Desktop.
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"]
})
]
});
@AndreaMinato
Copy link
Author

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.

@eriick505
Copy link

Putting any everywhere defeats the purpose of typescript

First 'any' in 'Module<any, any>' is the initial state of your module, and second 'any' is RootState of 'createStore'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment