为什么我有错误的注入“商店”当我尝试`this.store.commit（）`时找不到。
我正在尝试使用Vuex存储值。我正在使用Vuex 4.0而不是3.0。
因此，我正在尝试提交这样的值，就像我曾经在Vuex 3中所做的那样：
...
this.$store.commit("changerusername", u)
...
我尝试了以下内容：
在我的main.js内部，我有：
import { createApp } from "vue";
import { store } from "./store";
import App from "./App.vue";
const app = createApp(App);
app.use(store);
app.mount("#app");
sote/store/store内部。
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;
}
},
});
<template>
<router-view />
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "app",
});
</script>
import { useQuasar } from "quasar";
import { defineComponent } from "vue";
import { ref } from "vue";
import axios from "axios";
import { useStore } from "vuex";
setup() {
const store = useStore();
return {
store,
};
},
这样：
loginArrow: function (u, p) {
this.store.commit("changeusername", u);
},
但是当我这样做时，我会收到此错误：注入“存储”找不到。。
我做错了什么？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您使用的是组成API，则可以将
loginarrow函数更改为这样的东西，因为关键字此在构图API中不起作用：您也可以尝试使用
store.value.commit（...）而不是store.commit（...）If you're using the Composition API you could change your
loginArrowfunction to something like this because the keywordthisdoes not work in the Composition API:You can also try to use
store.value.commit(...)instead ofstore.commit(...)我发现原因不起作用的原因。它不是在功能中，而是直接在类星体中。
在文件夹应用程序/.quasar中，有4个文件app.js，client-entry.js，client-prefetch.js和quasar-user-options.js。
通常，它会自动配置，但是iDk为什么不可用，所以我通过与另一个项目进行比较来手动进行操作。
谢谢您的帮助！
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 !