I tried to create a first simple App but I have a problem with store.

I have in 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';
storemit('increment')

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

So in my 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++
        }
    }
});

So I would create a child ponent of App Component that use a event increment, so I have created a Component Counter

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

export default {

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

}
</script>

And I call this ponent from my App ponent that it is:

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

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

But I have this error in my Counter ponent:

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

found in

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

I tried to create a first simple App but I have a problem with store.

I have in 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.mit('increment')

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

So in my 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++
        }
    }
});

So I would create a child ponent of App Component that use a event increment, so I have created a Component Counter

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

export default {

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

}
</script>

And I call this ponent from my App ponent that it is:

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

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

But I have this error in my Counter ponent:

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

found in

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

• javascript
• vue.js
• vuex

• 3 Try this.$store.state.count instead of this.$.store.state.count (Remove the . after the $) – Daniel Diekmeier Commented Oct 27, 2017 at 13:29

2 Answers 2

You only made a small mistake: It has to be $store, not $.store:

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

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

I had the same problem and changing from Vue to vue and Vuex to vuex in all lines of .js store file I got it working.