Vuex 在子组件中不起作用

Question

下面的简单代码让我很头疼，因为 some-component 和 root 实例都将错误记录到控制台，而不是从 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)，但在这个 fiddle 中我不必这样做（它说 Vuex 已经注册）。另外，请注意，如果您取消注释带有数据的行，组件将正确呈现。

非常感谢任何帮助。

Answer 1

如果您使用的是 Vue/Vuex 2.0，您应该看看这个 link。在 vuex 2.0 中，您不会在组件中创建属性 vuex 来设置 getter 和操作。相反，在您的 store.js 文件中，您定义了一个 getters 对象，您将从状态中获取道具，然后将其注入商店，如下所示：

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

const actions = {}
const mutations = {}

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

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

import { mapGetter, mapActions } from 'vuex'

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

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

希望对您有所帮助！

Vuex 在子组件中不起作用

Vuex not working in child component

vue.js

vue-component

vuex

vue-loader