Vue.js 및 Vuex: 이거.$store가 정의되지 않았습니다.

Vue.js 및 Vuex: 이거.$store가 정의되지 않았습니다.

저는 이미 비슷한 제목의 질문을 읽었지만, 너무 복잡해서 따라갈 수 없습니다.내 코드를 사용하면 해결책을 찾기 쉬울 것 같아.관련 코드만 첨부하겠습니다.

내 저장소는 다음과 같습니다. obs: vuex 플러그인을 설치했습니다.

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


Vue.use(Vuex)

const state = {
    titulo: "please, change title"
}


const mutations = {
    changeTitle(state, title) {
        state.title= title
    }
}


export default new Vuex.Store({

    state : state,
    mutations : mutations
})

My App.vue

 <template>
    <div>
      <show-title-component ></show-title-component>
      <change-title-component></change-title-component>
    </div>
</template>

<script>


import ShowTitleComponent from './components/ShowtitleComponent';
import ChangeTitleComponent from './components/ChangeTitleComponent';
import store from './vuex/store';

export default {

components: {ShowTitleComponent, ChangeTitleComponent},
store,
data: function() {
  return {title: 'placeholder'}
}


}
</script>

오류를 생성하는 구성 요소:

<template><div>{{ title}}</div></template>

<script>

export default {
    name: "show-title-component",
    computed: {
      title() {
        return this.$store.state.title   /** error   here */
      }
    }
}

</script>

아마도, 당신은 다음 항목을 포함하지 않았을 것입니다.storeVue 인스턴스 내

앱 진입점(app.js, main.js 또는 index.js)에는 다음 코드가 포함되어야 합니다.

import store from './store'

new Vue({
 ...
 store,
 ...
})

그 후 를 사용할 수 있습니다.this.$store모든 컴포넌트에서든

일반적인 아키텍처를 추천합니다.https://vuex.vuejs.org/en/structure.html

스토어 파일은 Javascript(.js) 파일이어야 합니다.파일명을 변경하고, 서버를 재기동하면, 이것이 됩니다.$140 오류가 사라집니다.

에러는 실제로 여기에 있습니다.

App.vue

import store from './vuex/store';  /** in my case, it should be js file. */

main.js 파일

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Vuex from 'vuex';
import {store}  from './store'  //use curly braces to around store. 

Vue.config.productionTip = false;

Vue.use(Vuex);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

이건 나한테 효과가 있었어.

저 같은 경우에는 모듈을 사용하고 있었습니다.돌연변이, 행동, 게터에 아무 문제 없이 접근할 수 있었다.하지만 주 정부는 아니야해결책은 모듈을 사용하는 경우 모듈의 네임스페이스를 사용하여 액세스해야 합니다.

상세한 것에 대하여는, 메뉴얼을 참조해 주세요.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}

const store = new Vuex.Store({
    modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

기본적으로는 모듈 내의 액션, 돌연변이 및 getter는 글로벌 네임스페이스에 등록되어 있습니다.

1. 반드시 스토어 디렉토리를 만듭니다.

2.npm i vuex -S

3. 확인src／store/index.js갖고 있다import Vuex from 'vuex'그리고.Vue.use(Vuex)

4. 확인src／main.js갖고 있다import store from './store'

언급URL : https://stackoverflow.com/questions/47814626/vue-js-and-vuex-this-store-is-undefined