Vuejs 和 vuex，无法读取属性“$store”答案

【问题标题】：Vuejs and vuex, cannot read property '$store'Vuejs 和 vuex，无法读取属性“$store”
【发布时间】：2021-01-30 13:21:45
【问题描述】：

我正在尝试读取/访问我的 vuex 存储，但我收到错误“无法读取未定义的属性 '$store'，为什么？

这是我尝试过的......

我在单独的 store.js 文件中创建了一个 Vuex 商店。

import Vuex from "vuex";
import Vue from "vue";
import { Auth } from "aws-amplify";

Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    user: null
  },

  actions: {
    // AWS signup action.
    async signUp({ commit }, { username, password, firstName, lastName }) {
      const data = await Auth.signUp({
        username,
        password,
        attributes: {
          given_name: firstName,
          family_name: lastName
        }
      });
      console.log(data);
    }
  }
});

接下来，我在我的 main.js Vue 实例中注册了它。

import Vuex from 'vuex'
import Vue from 'vue'

// Provide an initial state object for Vuex.
import store from './util/store.js';
Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store: store, // Vuex mechanism to "inject" the store into all child components from the root component.
  render: h => h(App),
  router
})

我尝试访问商店，即。 console.log(this.$store)

在我的注册中，vue：

etc
</template>
<script>
  import AppNavbar from './Layout/AppNavbar'
  import AppFooter from './Layout/AppFooter'
  import { Card, Checkbox, Button, InfoSection } from 'src/components/UIComponents';

  export default {
    components: {
      Card,
      AppNavbar,
      AppFooter,
      InfoSection,
      [Checkbox.name]: Checkbox,
      [Button.name]: Button,
    },
    data(){
      return {
        form: {
          email: '',
          password: '',
          acceptTerms: true,
          
        }
      }
    },
    methods: {
   async submitReg() {
     console.log(this.$store)
     .........

【问题讨论】：

你在哪里打电话给this.$store？
在我的 reg.vue 中，内部方法，即 console.log(this.$store)
请分享整个代码，包括console.log(this.$store)

标签： vue.js vuex

【解决方案1】：

您错过了export default您的商店：

export default new Vuex.Store({
   ...

并在商店创建中使用一次Vue.use(Vuex)，因为Vue.use(Vuex) 期望您在之后定义一个商店实例，而main.js 中不是这种情况，它会忽略已经创建的商店。

【讨论】：