Vuex: _이것.$store가 정의되지 않았습니다.

Vuex: _이것.$store가 정의되지 않았습니다.

Vuex를 프로젝트에 추가한 후 액세스할 수 없습니다.모든 컴포넌트에 $store.에러 메세지는 다음과 같습니다.

TypeError: _이것.$store가 정의되지 않았습니다.

나는 이미 이 문제를 해결하기 위해 노력하고 있는 많은 질문들을 살펴봤지만, 내가 말할 수 있는 한에서는 모든 것을 잘 하고 있다.누구 도와줄 사람?vue-cli 웹 팩을 프로젝트 기반으로 사용하고 있습니다.

main.filename:

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.filename:

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
  }
}
...

패키지.json

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

해결:

를 사용하는 . on on on on on on on on on on on on on on 。created: function() {...}

화살표 함수를 사용할 경우 화살표 함수는 상위 컨텍스트에 바인딩되므로 예상대로 Vue 인스턴스가 되지 않습니다.대신,

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

스토어를 app.js에서 /store/index.js로 옮긴 후에도 이 문제가 발생하였습니다.

을 갈아입어야 했다.state.store.myValue로로 합니다.store.myValue

언급URL : https://stackoverflow.com/questions/48799617/vuex-this-store-is-undefined