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?

CodePudding user response：

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

CodePudding user response：

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 !