Create a Global Store using Vue 3 Composition API

3
votes

I am trying to create a global store using only the Vue 3 Composition API.

Until now I have been doing experimentation, and I read a lot how to use the Composition API, but right know I don't know how to use the provide and the inject.

All I know is that the provide will have all the data that will pass to a child component, so I thought that I should import the store into the main.ts. And the code looks like this:

This is the store (src/store/index.ts):

import { reactive, readonly } from "vue";

const state = reactive({
  fnacResults: [],
  interResults: [],
});

export default { state: readonly(state) };

This is the main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index";

createApp({ provide: { store }, }, App)
  .use(router)
  .mount("#app");

And when the parent component has the data, if I use the inject, I will be able to have access to all the data inside of the store. But in my case, it doesn't work. I have a feeling that the error starts when I set the provide in my main.ts file.

Have you tried to create a global store using the Composition API with provide and inject?

Btw, my component file (src/views/Home.vue) looks like this:

<template>
  <div>{{ store.state.fnacResults }}</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  inject: ['store']
});
</script>
2
typescriptvue.jsvuejs3vue-composition-api

2 Answers

5
votes

Application API

The createApp's first argument should be a component definition (which would be App in your case). Instead, you could use the app instance's provide():

createApp(App).provide('store', store).mount('#app')

demo

Composition API

With the Composition API, you could use provide like this:

// Parent.vue
import { provide } from 'vue'
import store from '@/store'

export default {
  setup() {
    provide('store', store)
    //...
  }
}

Then in some descendent component, you'd inject it with:

// Child.vue
import { inject } from 'vue'

export default {
  setup() {
    const store = inject('store')

    return {
      results: store.state.interResults
    }
  }
}

Import

Alternatively, it might be simpler to just import the store where you need it, and use it directly:

// Child.vue
import store from '@/store'

export default {
  setup() {
    return {
      results: store.state.interResults
    }
  }
}
3
votes

Try to provide the store inside the root component App and then use it in any child component :

export default {
   name:"App",
  provide: { store },

...

Hello component :

<template>
  <div>
    <ul>
      <li v-for="(item, i) in fnacResults" :key="i">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ["store"],
  computed: {
    fnacResults() {
      return this.store.state.fnacResults;
    },
  },
  mounted() {
    console.log(this.store.state);
  },
};
</script>

<style>
</style>

LIVE DEMO