how to use : router.push('/home')

[adityafawzan]

how to use : router.push('/home') in pinia store

and also, how to access custom properties :

[posva]

You can add the router to stores: https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-external-properties and then use them with this.router inside actions.

for setup stores, you can just call useRouter() as long as they are used inside of components (normal usage):

defineStore('auth', () => {
  const router = useRouter()
  // ...
})

[adityafawzan]

i've tried it, but got error in my action (authLogin function)

const authLogin = async (formState: any) => {
try {
const result = await backend.login(formState);
if (result.data.accessToken) {
authState.value.isAuthenticated = true;
authState.value.user = result.data;
router.push("/"); // ERROR HERE, CAN NOT FIND NAME ROUTER
} else {
authState.value.isAuthenticated = false;
authState.value.user = result.data;
message.error(result.data.message);
}
console.log(result.data);
} catch (error) {
authState.value.isAuthenticated = false;
authState.value.user.accessToken = null;
authState.value.user.id = null;
authState.value.user.message = "";
authState.value.user.nama = "";
authState.value.user.nama_perusahaan = "";
authState.value.user.success = false;
authState.value.user.username = "";
message.error("Login Error");
console.error(error);
}
};

my complete store.ts:

import { reactive } from "vue";
import { defineStore } from "pinia";
import { useStorage } from "@vueuse/core";
import backend from "@/services/backend";
import { message } from "ant-design-vue";

export const useAuthStore = defineStore("auth", () => {
interface AuthState {
isAuthenticated: boolean;
user: {
success: boolean;
message: string;
id: number;
username: string;
nama: string;
nama_perusahaan: string;
accessToken: string;
};
}

interface AuthLogin {
(formState: any): void;
}

const authState = reactive(
useStorage("authState", {
isAuthenticated: false,
user: {
accessToken: null,
id: null,
message: "",
nama: "",
nama_perusahaan: "",
success: false,
username: "",
},
})
);

const authLogin = async (formState: any) => {
try {
const result = await backend.login(formState);
if (result.data.accessToken) {
authState.value.isAuthenticated = true;
authState.value.user = result.data;
} else {
authState.value.isAuthenticated = false;
authState.value.user = result.data;
message.error(result.data.message);
}
console.log(result.data);
} catch (error) {
authState.value.isAuthenticated = false;
authState.value.user.accessToken = null;
authState.value.user.id = null;
authState.value.user.message = "";
authState.value.user.nama = "";
authState.value.user.nama_perusahaan = "";
authState.value.user.success = false;
authState.value.user.username = "";
message.error("Login Error");
console.error(error);
}
};

const authLogout = () => {
authState.value.isAuthenticated = false;
authState.value.user.accessToken = null;
authState.value.user.id = null;
authState.value.user.message = "";
authState.value.user.nama = "";
authState.value.user.nama_perusahaan = "";
authState.value.user.success = false;
authState.value.user.username = "";
};

return {
authState,
authLogin,
authLogout,
};
});

[posva]

Just updated the answer to include more information.

[adityafawzan]

anyways, is it good or bad practice calling router inside/from the store ? or just keep it on the login template ?

[adityafawzan]

i just tried it, it didn't work, it catched error instead

login.vue :

<script setup lang="ts"> import { reactive, computed } from "vue"; import { useRouter } from "vue-router"; import { useStore } from "@/stores/index"; import { UserOutlined, LockOutlined } from "@ant-design/icons-vue"; interface FormState { username: string; password: string; } const router = useRouter(); const store = useStore(); const formState: FormState = reactive({ username: "", password: "", }); const disabled = computed(() => { return !(formState.username && formState.password); }); const handleSubmit = async () => { try { await store.authLogin(formState); // router.push("/"); } catch (error) { console.error(error); } }; </script> Log in

store.ts :

import { reactive } from "vue";
import { defineStore } from "pinia";
import { useStorage } from "@vueuse/core";
import backend from "@/services/backend";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";

export const useStore = defineStore("main", () => {
const router = useRouter();

const statePengaturan = reactive(
useStorage("statePengaturan", {
lang: "ina",
})
);

const stateAutentikasi = reactive(
useStorage("stateAutentikasi", {
isAuthenticated: false,
user: {
accessToken: null,
id: null,
message: "",
nama: "",
nama_perusahaan: "",
success: false,
username: "",
},
})
);

interface AuthLogin {
(formState: any): void;
}

const authLogin = async (formState: any) => {
try {
const result = await backend.login(formState);
if (result.data.accessToken) {
stateAutentikasi.value.isAuthenticated = true;
stateAutentikasi.value.user = result.data;
router.push("/");
} else {
stateAutentikasi.value.isAuthenticated = false;
stateAutentikasi.value.user = result.data;
message.error(result.data.message);
}
console.log(result.data);
} catch (error) {
stateAutentikasi.value.isAuthenticated = false;
stateAutentikasi.value.user.accessToken = null;
stateAutentikasi.value.user.id = null;
stateAutentikasi.value.user.message = "";
stateAutentikasi.value.user.nama = "";
stateAutentikasi.value.user.nama_perusahaan = "";
stateAutentikasi.value.user.success = false;
stateAutentikasi.value.user.username = "";
message.error("Login Error"); // CATCH ERROR HERE INSTEAD
console.error(error);
}
};

const authLogout = () => {
stateAutentikasi.value.isAuthenticated = false;
stateAutentikasi.value.user.accessToken = null;
stateAutentikasi.value.user.id = null;
stateAutentikasi.value.user.message = "";
stateAutentikasi.value.user.nama = "";
stateAutentikasi.value.user.nama_perusahaan = "";
stateAutentikasi.value.user.success = false;
stateAutentikasi.value.user.username = "";
};

return {
statePengaturan,
stateAutentikasi,
authLogin,
authLogout,
};
});