存储 vuex Cannot read 属性 'store' of undefined”

Question

我尝试创建第一个简单的应用程序，但我遇到了商店问题。

我在 mainJS

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'

Vue.use(Vuex);


import {store} from './Store.js';
store.commit('increment')

new Vue({
  el: '#app',
  router,
   store,
  template: '<div><App></App></div>',
  components: { App }
});

所以在我的store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
});

因此我将创建一个使用事件 increment 的 App 组件的子组件，因此我创建了一个组件 Counter

<template>
    <div>{{ count }}</div>
</template>
<script>

export default {

    name: "Counter",
    computed: {
        count () {
            return this.$.store.state.count
        }
    }

}
</script>

我从我的 App 组件中调用这个组件，它是：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Counter></Counter>
  </div>
</template>

<script>
import Counter from './components/Counter.vue'
export default {
  name: 'app',
  components:{
      Counter
  }
}
</script>

但是我的 Counter 组件中有这个错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'store' of undefined"

found in

---> at src\components\Counter.vue at src\App.vue

Answer 1

你只是犯了一个小错误：必须是$store，而不是$.store:

<template>
    <div>{{ count }}</div>
</template>

<script>
export default {
    name: "Counter",
    computed: {
        count () {
            return this.$store.state.count
        }
    }
}
</script>

Answer 2

我遇到了同样的问题，在 .js 存储文件的所有行中从 Vue 更改为 vue 并将 Vuex 更改为 vuex 我让它工作了。

存储 vuex Cannot read 属性 'store' of undefined”

Store vuex Cannot read property 'store' of undefined"

javascript

vue.js

vuex