How to get access to the Root inside the setup method of Vue 3 component?

Question

I have an Vue App. I use vuex. I created my app like this:

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");

Than i one of my component i am trying to access context.root.$store in the setup() method , but context.root is 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>

My idea is get acces to my store via context.root. I watched videos and examples with this. but they refer to Vue 2 using 'vue/composition-api' as import.

What i am missing?

Daniel Daniel · Accepted Answer · 2020-08-19T18:03:04

You might be able to include and access the store directly

store.dispatch('myModule/myModuleAction') store.myModule.state.blabla

import {ref, computed } from "vue";
import store from './store/index'; // include store

export default {
  name: "ClientList",

  setup(props) {
    
    const clients = ref([]);

    const clientOrdersLength = computed(() => {
      store.dispatch('myAction'); // call dispatch
      store.state.myItem // or access store's state
      return clients.value.length;
    });

    return { clients, clientOrdersLength }
  },
  
};

How to get access to the Root inside the setup method of Vue 3 component?

2 Answers