vuex: count is not defined in vue component file

Question

Just started to integrate vuex to my laravel application, going through with the sample counter application in the official vuex docs.

js/components/calculate.vue

<template>
  <div>
    <p>{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>
<script >
  import store from '../app.js'

  export default {
    computed: {
      count () {

        return store.state.count
      }
    },
    methods: {
      increment () {
        store.commit('increment')
      },
      decrement () {
        store.commit('decrement')
      }
    }
  }
</script>

js/app.js

const calculate = Vue.component('calculate', require('./components/calculate.vue'));

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



const app = new Vue({
  el: '#app'
});

Using webpack build

I got store.state.count not defined error in this line return store.count.

Amresh Venugopal · Accepted Answer · 2017-03-01 09:18:07Z

0

If you are creating your store in app.js file, (since you haven't mentioned) you need to add

const calculate = Vue.component('calculate', require('./components/calculate.vue'));

Vue.use(Vuex) // this line

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

const app = new Vue({
  el: '#app'
});

This goes without saying that you need to import Vuex in this file.

after which you need to modify, this part of your code:

const app = new Vue({
  el: '#app'
});

to

const app = new Vue({
  el: '#app',
  store // if you're vue-cli/babel else use store: store
});

And in js/components/calculate.vue

<template>
  <div>
    <p>{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>
<script >
 // import store from '../app.js' this import is not required

  export default {
    computed: {
      count () {
        return this.$store.state.count
      }
    },
    methods: {
      increment () {
        this.$store.commit('increment')
      },
      decrement () {
        this.$store.commit('decrement')
      }
    }
  }
</script>

The import is not required as the store is supposed to be accessible to each component of the vue instance, to access it, you just need to have access to $store property of the vue instance which in your component is this (as long as the context doesn't change by means of a callback or something similar.)

edited Mar 1, 2017 at 9:18

answered Mar 1, 2017 at 8:52

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Geethu Jojo Over a year ago

When i add Vue.use(Vuex); get Uncaught TypeError: plugin.apply is not a function

Amresh Venugopal Over a year ago

Then don't add the vue.use(Vuex) part.

Geethu Jojo Over a year ago

Now the error is gone but showing another error Uncaught TypeError: Cannot read property 'count' of undefined in return store.state.count

Jabaa Over a year ago

@AmreshVenugopal do you have an answer for this?? stackoverflow.com/questions/42549580/…

Collectives™ on Stack Overflow

vuex: count is not defined in vue component file

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related