Question

以下简单代码给我带来了很多麻烦，因为some-component和root实例都会向控制台记录错误，而不是从vuex对象绑定。我可能会在这里失踪什么？

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

在我的代码中，我打电话给Vue.use（Vuex），但在这个小提琴中我不必（它说Vuex已经注册）。此外，请注意，如果您使用数据取消注释该行，则该组件将正确呈现。

非常感谢任何帮助。

Answer 1

如果您使用的是Vue / Vuex 2.0，请查看此link。在vuex 2.0中，您不在组件内创建属性uint32_t来设置getter和操作。而是在你的vuex文件中定义一个getter对象，在那里你可以从状态获取道具，然后将它注入商店，如下所示：

store.js

在组件中，您可以使用计算属性定义getter，如下所示：

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

const actions = {}
const mutations = {}

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

然后你可以像普通计算机一样调用这些道具。我再说一遍，这适用于我认为您在阅读问题评论后使用的vuex 2。

我希望它有所帮助！

Vuex不在子组件中工作

1 个答案: