Vue.jsとvuex：これは$ storeが定義されていません

Question

私はすでに同じようなタイトルで質問を読んでいますが、その複雑さのために私はそれらに従うことができません。私のコードでは、私にとって解決策が見つけやすくなると思います。私は関連するコードだけを含める。

私の店はこれです： 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> 

Answer 1

ストアファイルはJavascript（.jsファイル）ファイルである必要があります。ファイル名を変更してサーバをリブートすると、$ toreエラーが消えます。

は、エラーが実際にここにあった：

App.vue

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

Answer 2

多分あなたstoreのインスタンスのうちのVue

あなたのAppエントリポイント（app.jsまたはmain.jsまたはindex.js）には次のコードを含める必要があります：

import store from './vuex/store' 

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

は、その後、任意のコンポーネント

でthis.$storeを使用するが、私は一般的なアーキテクチャをお勧めします：あなたはストアディレクトリ

2. npm i vuex -S

3.Make必ずそれを作成https://vuex.vuejs.org/en/structure.html

Answer 3

1.Makeは確かsrc／store/index.jsは、import Vuex from 'vuex'とVue.use(Vuex)

4 。確かにsrc／main.jsにはimport store from './store'