Store isn't available to any child components

[ashokgelal]

I've followed the official tutorial as well as read all the docs but I can't seem to make vuex work with my project. I'm using Vuex with Laravel if that makes any difference. This is what I have:

admin_dashboard.js

import store from './vuex/store'
import AdminDashboard from './components/admin/AdminDashboard.vue';
new Vue({
    store: store,
    el: '#admin-dashboard',
    components: {AdminDashboard},
})

store.js

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

Vue.use(Vuex)

Vue.config.debug = true
const debug = process.env.NODE_ENV !== 'production'

const state = {
    count: 0
}

const mutations = {
    INCREMENT (state, amount){
        state.count = state.count + amount
    }
}

export default new Vuex.Store({
    state,
    mutations
})

AdminDashboard.vue

<template>
  <div>
    <button @click='increment'>Increment +1</button>
  </div>
</template>

<script>
  import {incrementCounter} from '../../vuex/actions'
  vuex: {
    actions: {
      increment: incrementCounter
    }
  }
}

I get the following warning and error in the console: ⚠️ [vuex] already installed. Vue.use(Vuex) should be called only once. ❗️ [Vue warn]: v-on:click="increment" expects a function value, got undefined (found in component: )

The problem seems to be by not having store available to the child components.

I've spent too much time already trying to find out what I'm doing wrong. This is my first time trying to use Vuex so I must have done something really stupid.

[ktsn]

I cannot find any problems in your code. (There is syntax error in AdminDashboard.vue but it seems not to be the cause of this issue) What version of Vue and Vuex do you use?

[ashokgelal]

I'm using node v5.4.0, vue 1.0.26, and vuex 0.8.2. I also tried with vuex 1.0.0-rc2 but no luck. Also, I wonder what the warning vuex already installed is about.

[ktsn]

Hmm, it's weird... Are you using webpack on your project? Can you show me your build configuration? If you don't mind, can you share your whole project?

[ktsn]

[vuex] already installed. Vue.use(Vuex) should be called only once.

I guess, there are already Vue object in window and Vuex automatically install it. After that, you try to install it manually by Vue.use(Vuex) but it refused because Vuex has already has Vue object.

And Vue in window might be different object from imported Vue, then the store does not propagate child components because you use the latter Vue for creating root VM.

This is just conjecture and can be wrong.

[ashokgelal]

I finally got it to working. I'm really not sure what went wrong but looks like, among other things, I accidentally did require('vue') twice and that may have caused it. I also got rid of Vue.use(Vuex), which helped to get rid of the warning. Thanks for your help.

[mariogodinez]

i think the problem is beacuse you explicitly register the 'store' to VUE, i had the same problem

[mobilesite]

I've just ran into the same problem. And the true reason is that I'm using the version 1 vuex syntax when the vuex version installed is vuex 2.

[ajsgi]

I ran into this issue and fixed it after a lot of debugging. Turned out to be a hotswap issue with webpack since I was using symlinks.

C:\wamp\www was a symlink to F:\wamp\www.

cd C:\wamp\www\project; npm run dev; did not work (the child components were not rendering without importing in each individual .vue file) cd F:\wamp\www\project; npm run dev; did work (using global Vue prototypes)

You can make webpack accept symlinks and go back to working again by changing symlinks: false in your webpack.base.conf.js file to symlinks: true:

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    },
    symlinks: true // <-- 3 hours of bug hunting to change FALSE to TRUE
  },