web-dev-qa-db-ja.com

Vue.jsおよびvuex：this。$ 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
})

私の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>
typescriptvue.jsvuejs2
10
Diego Alves

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

エラーは実際にここにありました：

App.vue

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

たぶん、Vueインスタンス内にstoreを含めていないかもしれません

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

import store from './store'

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

その後、任意のコンポーネントでthis.$storeを使用できます

しかし、一般的なアーキテクチャをお勧めします： https://vuex.vuejs.org/en/structure.htmlenter image description here

14
Volodymyr Symonenko

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'_を持っていることを確認します

0
朱晓鹏

私の場合、モジュールを使用していました。突然変異、アクション、ゲッターに問題なくアクセスできました。しかし、状態ではありません。解決策は、モジュールを使用する場合、状態はモジュールの名前空間でアクセスする必要があることです。

詳細については、 documentation を確認してください。

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

デフォルトでは、モジュール内のアクション、ミューテーション、およびゲッターは引き続きグローバル名前空間に登録されます

0
uiroshan