I recently built a Vue App and incorporated Vuex for state management. Here is how I set up my app initially:
import { createApp } from "vue";
import axios from "axios";
import App from "./App.vue";
import router from "./router";
import store from "./store/index";
axios.defaults.baseURL = "https://localhost:44349";
const app = createApp(App)
.use(router)
.use(store)
.mount("#app");
In one of the components, I attempted to access context.root.$store within the setup() method but found that context.root was undefined.
<script>
import {ref, computed } from "vue";
export default {
name: "ClientList",
setup(props, context) {
const clients = ref([]);
console.log(context);
const clientOrdersLenght = computed(() => {
return clients.value.length;
});
return { clients, clientOrdersLenght }
},
};
</script>
I intended to access my store using context.root. While researching solutions, most examples referenced Vue 2 with 'vue/composition-api' as an import. What could be causing this issue?