Why do I have the error `injection "store" not found` when I try `this.store.commit()`?

user_19352663 0
Viewed 57

I'm trying to store values using VueX. I'm using Vuex 4.0 not the 3.0.

So I'm trying to commit a value like this, as I was used to in Vuex 3 :

...
 this.$store.commit("changerusername", u)
...

So I tried this :

Inside my main.js I have this :

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

const app = createApp(App);
app.use(store);
app.mount("#app");

Inside my store/store.js, I have this :

import vue from "vue";
import { createStore } from "vuex";

export const store = createStore({
  state: {
    username: null,
    token: null,
  },
  getters: {
    getUsername: function (state) {
      return `${state.username}`;
    },
  },
  mutation: {
    changeusername: function (state, newusername) {
      state.username = newusername;
    }
  },
});

App.vue have this :

<template>
  <router-view />
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "app",
});
</script>

Ok now, inside the file where I want to do my commit, I wrote this :

Imports :

import { useQuasar } from "quasar";
import { defineComponent } from "vue";
import { ref } from "vue";
import axios from "axios";
import { useStore } from "vuex";

The setup :


    setup() {
      const store = useStore();

      return {
        store,
      };
    },

And I use it like this :


      loginArrow: function (u, p) {
        this.store.commit("changeusername", u);
      },

But when I do this I got this error : injection "store" not found..

What I am doing wrong?

vuex vue.js javascript
2 Answers

If you're using the Composition API you could change your loginArrow function to something like this because the keyword this does not work in the Composition API:

const loginArrow = (u, p) => {
    store.commit("changeusername", u);
}

You can also try to use store.value.commit(...) instead of store.commit(...)

user_192971120

I found the reason why that wasn't working. it wasn't in the function but in quasar directly.

In the folder app/.quasar there's 4 files app.js, client-entry.js, client-prefetch.js and quasar-user-options.js.

Normally it configure automatically but idk why quasar didn't so I did it manually by comparing with another project.

Thank you for the help !

user_193526630
Related