Vuex: _this.$store is undefined

Question

After adding Vuex to my project I am unable to access this.$store in any components. The error message is

TypeError: _this.$store is undefined

I have looked at a bunch of questions already trying to solve this but as far as I can tell I'm doing everything right. Can anyone help? I am using the vue-cli webpack as my project base

main.js:

import Vue from 'vue';
import resource from 'vue-resource';
import router from './router';
import store from './store/index.js';

import App from './App';
import Home from './components/Home';
import NavButton from './components/atoms/NavButton';

Vue.use(resource);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App, Home, NavButton },
  template: '<App/>'
})

/store/index.js:

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

Vue.use(Vuex);

const state = {
    isWriting: false,
    isLoggedIn: false,
}

const getters = {
    isWriting: state => {
        return state.isWriting;
    }
}

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

App.vue

...
import NavBar from '@/components/organisms/NavBar';
export default {
  name: 'App',
  components: { NavBar },
  created: () => {
    console.log(this.$store.state.isLoggedIn); // THIS LINE
  }
}
...

package.json

...
"dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.3.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
...

Can't see `_this.$store` **anywhere** in your code. What **exactly** is the error message and what piece of code is producing it? — Phil, Feb 15 '18 at 03:45
it is the console.log(this.$store.state.isLoggedIn). The error message exactly is `TypeError: _this.$store is undefined` @Phil — Jared Jones, Feb 15 '18 at 04:06
The error message does not match your code at all. Where is `_this` defined? Are you perhaps viewing an old / cached copy? — Phil, Feb 15 '18 at 04:07
I have cache busted and never typed _this, that is just how the error message is showing up. If you add an underbar the error is `TypeError: _this is undefined`. — Jared Jones, Feb 15 '18 at 04:16
Might be your function definition. Try `created: function() { ... }` or just `created () { ... }`. The arrow function may be binding `this` to the the `App.vue` script context instead of the component. I imagine `_this` is coming from your transpiler — Phil, Feb 15 '18 at 04:18
Possible duplicate of [VueJS: why is "this" undefined?](https://stackoverflow.com/questions/43929650/vuejs-why-is-this-undefined) — thanksd, Feb 20 '18 at 14:41

score 14 · Accepted Answer · answered Feb 15 '18 at 04:18

14

SOLVED:

Using fat arrow on created is not correct, should be created: function() {...}

answered Feb 15 '18 at 04:18

Jared Jones

228
2
9

1

Hehe, I just suggested the very same thing. Glad you got it sorted – Phil Feb 15 '18 at 04:18

score 2 · Answer 2 · answered Jul 24 '18 at 00:47

When arrow functions are used "this" will not be the Vue instance as you’d expect since arrow functions are bound to the parent context. Instead,

    created() { //function body. "this" will be the Vue instance},
    mounted() {//function body. "this" will be the Vue instance},
    methods: { someFunc() {}, async someAsyncFunc {} }

Dazzle · Answer 3 · 2018-07-29T17:16:07.620

0

I also encountered this problem after moving the store from app.js to /store/index.js

I had to change state.store.myValue to store.myValue in the commits

edited Jul 29 '18 at 17:16

answered Jul 29 '18 at 15:04

Dazzle

2,880
3
25
52

Vuex: _this.$store is undefined

3 Answers3

Linked