子コンポーネントでVuexが動作しない

次の単純なコードは、いくつかのコンポーネントとルートインスタンスの両方がvuexオブジェクトからのバインディングではなくコンソールにエラーを記録するため、頭痛に悩まされています。私はここで何が失われる可能性がありますか？私のコードで子コンポーネントでVuexが動作しない

var state = { 
 
\t counter: 0 
 
}; 
 
var mutations = {}; 
 
var store = new Vuex.Store({state, mutations}); 
 

 
var someComponent = Vue.extend({ 
 
    template: '<div>{{counter}}</div>', 
 
    //data: function(){return {counter: 0}}, 
 
    vuex: { 
 
    getters: { 
 
     counter: getCounter 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    \t 'some-component': someComponent 
 
    }, 
 
    store: store, 
 
    vuex: { 
 
    \t getters: { 
 
    \t \t counter: getCounter 
 
    \t } 
 
    } 
 
}); 
 

 

 
function getCounter(state) { 
 
    return state.counter; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>vue-bug</title> 
 
    </head> 
 
    <body> 
 
    <div id="app"> 
 
    \t <span>{{counter}}</span> 
 
    \t <some-component></some-component> 
 
    </div> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.1/vue.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0-rc.1/vuex.js"></script> 
 
    </body> 
 
</html>

、私はVue.use（Vuex）を呼んでいるが、このフィドルに私は（それがVuexが既に登録されていることを言います）する必要はありません。また、データを含む行のコメントを外すと、コンポーネントが正しくレンダリングされることに注意してください。

ご協力いただきまして誠にありがとうございます。

出典

2016-09-14 Ozymas

「Vue 2.0」を使用している場合は、「Vuex 2.0」を使用してください。私はVue.js 2.0があなたが使っているVuexのバージョンと互換性があることを100％確信していません。 Vuex 2.0にアップグレードできますか？コンポーネントに 'created'フックを追加し、' console.log（this。$ store） 'を実行して、あなたの店があなたのコンポーネントに注入されているかどうか確認できますか？ jsFiddleを提供すると、上記のコードを見てデバッグするのが簡単です。 –

@PrimozRome私は元の質問を大幅に編集して再現しやすくし、vuexのバージョンを更新しました。また、 'console.log（this。$ store）'はストアが注入されていることを伝えます。ありがとう！ – Ozymas

Vue/Vuex 2.0をご使用の場合は、linkをご覧ください。 vuex 2.0では、ゲッターとアクションを設定するためにコンポーネント内にプロパティvuexを作成しません。あなたのコンポーネントで

const state = { 
    counter: 0 
} 
const getters = { 
    getCounter: state.counter 
} 

const actions = {} 
const mutations = {} 

export default new Vuex.Store({ 
    state, 
    getters, 
    actions, 
    mutations, 
})

あなただけの計算されたプロパティを使用してゲッターを定義することができます。代わりにあなたのstore.jsファイルにあなたが状態から小道具を取得し、店にそれを注入し、このようよどこゲッターオブジェクトを定義します次のようになります。

import { mapGetter, mapActions } from 'vuex' 

export default { 
    template: '#some-template', 
    computed: { 
     yourFirstComputed() {}, 
     anotherOfYourComputed() {}, 
     ...mapGetters({ 
      getCounter: 'getCounter' 
     }) 
    }, 
    methods: { 
     yourMethod(){}, 
     ...mapActions({ 
      anyOfYourActions: 'anyOfYourActions' 
     }) 
    } 
}

次に、通常の計算方法と同じようにこれらの小道具を呼び出すことができます。私はこれを繰り返します。これは、あなたが質問にコメントを読んだ後に使用していると思われるvuex 2に適用されます。

私はそれが助けてくれることを願っています！

出典

2016-09-14 12:44:35

ありがとう、これはそれを修正するようです！リリースノートごとに、vuexコンポーネントオプションは推奨されなくなりました。私がしなければならなかったのは、ゲッターとアクションをストアコンストラクタに渡した後に 'computed：Vuex.mapGetters（['counter']）'を追加するだけでした。 – Ozymas

うれしいよ;） –

この同じ問題が見つかるかもしれない人のための簡単なアップデートです：答えが正しいにもかかわらず、私は必要な作業を経て得られたコンポーネントを得るためにもう一度ステップを実行する必要がありました。 [この問題]（https://github.com/vuejs/vuex/issues/264）で説明したように、 'vue/dist/vue 'から' import Vue'を 'vue 'から' import Vue'に置き換える必要があります。 '。また、webpack設定リゾルブオブジェクトに 'alias'を追加する必要があります。'別名：{ vue： 'vue/dist/vue.js' } '。 – Ozymas

子コンポーネントでVuexが動作しない

答えて

関連する問題