1

次の単純なコードは、いくつかのコンポーネントとルート インスタンスの両方が、vuex オブジェクトからバインドするのではなく、コンソールにエラーを記録するため、多くの頭痛の種になっています。ここで何が欠けている可能性がありますか?

var state = {
	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: {
  	'some-component': someComponent
  },
  store: store,
  vuex: {
  	getters: {
  		counter: getCounter
  	}
  }
});


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">
    	<span>{{counter}}</span>
    	<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 は既に登録されていると表示されます)。また、データのある行のコメントを外すと、コンポーネントが適切にレンダリングされることに注意してください。

どんな助けでも大歓迎です。

4

1 に答える 1