2017-12-14 5 views
0

나는 유사한 제목의 질문을 이미 읽었지만 그 복잡성 때문에 그 질문을 따르지 못합니다. 나는 내 코드로 나를위한 해결책을 찾는 것이 더 쉬울 것이라고 생각한다. 관련 코드 만 포함합니다.

내 상점은 입니다. 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 
}) 

내 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> 
+2

012. main.js에 포함시켜야합니다. – Traxo

+0

'new Vue'를 호출하는 항목 파일에 포함 시키십시오. –

+0

지식을 수정했는지 확인하기 위해 책을 다시 읽는 중입니다. 나는 필자의 것과 비교해 코드 불일치를 발견하지 못했다. 내가 잘못했던 유일한 점은 저장소 파일에 .vue 파일을 지정하는 것이 었습니다. 내가 그것을 .js (store.js)로 바꾼 후에도 효과가있었습니다! –

답변

0

저장소 파일이 있어야합니다 자바 스크립트 (의 .js) 파일. 파일 이름을 변경하고 서버를 재부팅하면이 문제가 발생합니다. $ tore error vanish.

는 오류가 실제로 여기에 있었다 :

App.vue

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

본인의 대답을 수락하십시오. – herrbischoff

1

어쩌면 당신 store인스턴스 중 뷰

당신이 응용 프로그램의 진입 점 (app.js 또는 main.js 또는 index.js)에는 다음 코드가 포함되어야합니다.

import store from './vuex/store' 

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

다음 구성 요소

this.$store를 사용하지만 일반적인 아키텍처 추천 : https://vuex.vuejs.org/en/structure.html enter image description here

0

1.Make 당신이 그것을

2. npm i vuex -S

3.Make 확인 상점 디렉토리를 만들 수 있는지를 src/store/index.jsimport Vuex from 'vuex'Vue.use(Vuex)

4 . src/main.jsimport store from './store'