Vuex: this.$store is undefined in components

[lukepolo]

Vue.js / Vuex version

version "2.0.3"
/
version "2.0.0"

Reproduction Link

https://github.com/lukepolo/temp

Steps to reproduce

Open public/index

Should see that

What is Expected?

store should contain the store object to see the states

What is actually happening?

Uncaught ReferenceError: store is not defined

[ktsn]

Because you import standalone build directly by writing impot Vue from 'vue/dist/vue.js'.
https://github.com/lukepolo/temp/blob/vue-setup/assets/js/app.js#L2

Please see: http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

[lukepolo]

Perfect, thank you.

[ubershmekel]

I hit this issue too. Twice - once with templates and now with Vuex. Why does the documentation always use import Vue from 'vue' when what I'm supposed to do is actually import * as Vue from 'vue/dist/vue.common.js';.

• https://vuex.vuejs.org/en/installation.html
• https://github.com/vuejs/vuex/blob/dev/examples/counter/app.js

Can you guys either fix the documentation, or just include the whole shebang in the vue npm package and call the other one vue-runtime to avoid conusion? Should I open another ticket for such a request @ktsn?

[ktsn]

Please read carefully: https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build
Unfortunately, we cannot publish different builds because 3rd party plugins may depends on vue package.

[ubershmekel]

@ktsn perhaps consider that for v3 then. Perhaps instead of flipping the meanings you can just drop the vue package and have a vue.common alongside vue.core to be sure people are actively making the decision on what to include.

I've reread and added some clarification to the docs. See https://github.com/vuejs/vuejs.org/pull/663

Thank you.

[jbnv]

I'm running into this issue now. Per _Runtime + Compiler vs. Runtime-only_ I'm developing for runtime-only. I don't use the 'vue$': 'vue/dist/vue.esm.js' alias or vue-loader.

[boknoypatotoy]

in your main.js
write these codes

import store from "./store";
Vue.prototype.$store = store;

now, in your components script ... you can access it by
this.$store.state.data

[narkissbv]

in your main.js
write these codes

import store from "./store";
Vue.prototype.$store = store;

now, in your components script ... you can access it by
this.$store.state.data

This worked for me, but why isn't $store already registered when I'm including the store in he Vue object?