为什么当我尝试 `this.store.commit()` 时出现错误 `injection "store" not found`？

Question

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?

Answer 1

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(...)

Answer 2

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 !