Exploring Vuex for my personal project has piqued my interest, particularly in understanding how the various properties interact. I hope this question isn't too redundant.
I've set up my store in Vue3 as follows:
// store/index.js
import { createStore } from "vuex";
import axios from "axios";
let connected = false;
axios.defaults.withCredentials = true;
axios.defaults.baseURL = import.meta.env.VITE_BASE_URL;
export default createStore({
state: {
connected,
},
getters: {
getConnected: (state) => {
return state.connected;
},
},
mutations: {
setConnected(state, isConnected) {
console.log("in mutations");
return (state.connected = isConnected);
},
},
actions: {
isConnected: ({ commit }) => {
axios
.get("/auth/me")
.then(() => {
console.log("here positive");
commit("setConnected", true);
})
.catch(() => {
console.log("here negative");
commit("setConnected", false);
});
},
},
modules: {},
});
The state represents what we're storing, the mutations handle operations on the state, and the actions manage the mutations via commits.
Below is my Vue page setup:
<template>
<v-row justify="start">
<nav>
<router-link to="/">Home</router-link> |
<router-link :to="connected ? '/me' : '/signup'">{{
connected ? "Profile Page" : "Sign up"
}}</router-link>
|
<router-link :to="connected ? '/logout' : '/login'">{{
connected ? "Logout" : "Login"
}}</router-link>
</nav>
</v-row>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
name: "NavBar",
data() {
return {
connected: false,
};
},
methods: {
...mapGetters(["getConnected"]),
...mapActions(["isConnected"]),
},
mounted() {
this.connected = this.getConnected();
console.log("connected", this.connected);
},
};
</script>
<style>
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
My query pertains to triggering the actions. Should I explicitly invoke the method using mapActions, or is there something I might be overlooking?
Thanks in advance!