未捕获（承诺）类型错误：无法读取未定义的属性“$store”

Question

我想用 vue3 和 vuex 构建一个应用程序。我在使用 $store 时遇到错误（Uncaught (in promise) TypeError: Cannot read property '$store' of undefined）。但我没有找到任何关于那个的东西。你能帮我吗？

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

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

main.js

<template>
  {{ posts }}
  <button @click="clickOnButton">Tıkla</button>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  computed: {
    posts: () => this.$store.state.post
  },
  methods: {
    clickOnButton: () => {
      this.$store.commit("getPost");
    }
  }
};
</script>

组件

Answer 1

问题与您的商店无关。当您应该使用标准方法语法时，您正在使用箭头函数：

// ...
  methods: {
    clickOnButton() {
      // this will now point to your component.
      this.$store.commit('getPost');
    }
  }
// ...

箭头函数的首要限制是它们完全与上下文无关：this 不受约束。请参阅vue documentation

和arrow functions documentation：

<块引用>

箭头函数表达式是传统函数表达式的紧凑替代品，但有局限性，不能在所有情况下使用。

差异和限制：

• 没有自己的 this 或 super 绑定，不应用作方法。