Using Provide/Inject with a Vuex Store

Demonstrate how to use provide/inject to make a Vuex store accessible in the component tree without using mapState or mapGetters.
import { createStore } from 'vuex';

// Create a new Vuex store
const store = createStore({
  state() {
    return {
      count: 0
  mutations: {
    increment(state) {

export default store;
This code creates a new Vuex store with a simple state containing a count property and a mutation to increment it. This store will be provided to the component tree.
import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // Import the store created above

const app = createApp(App);

// Provide the store instance to the entire app
app.provide('store', store);

In the main entry file, the Vuex store is provided to the Vue application using the `provide` function. All components within the app can now inject the Vuex store.
export default {
  inject: ['store'], // Inject the Vuex store provided in the root instance
  computed: {
    count() {
      return; // Access the Vuex store's state directly
  methods: {
    incrementCount() {'increment'); // Commit a mutation to the Vuex store
This component script injects the Vuex store and uses it to create a computed property for the count state and a method to dispatch a mutation. The Vuex store is accessed directly through without using mapState or mapGetters.