vue.js - 通过传递变量获取 Vuex 状态数据

Question

我是使用 Vue 和 Vuex 的新手，目前我正在尝试将道具绑定到我的组件，如下所示：

我的 HTML 如下所示：

<div id="vuemodal">
  <modal :active="get('active')" :login="get('login')" :register="get('register')">
  </modal>
</div>

我的 Vue 实例如下所示：

var modal = new Vue({
  el: '#vuemodal',
  store,
  data: {
    active: '',
    login: false,
    register: false,
  },
  methods: {
    get: function(item){
      var state = this.$store.state;
      return state.item;
   }
 }
})

我的 Vuex 商店是这样的：

const store = new Vuex.Store({
  state: {
    active: 'login',
    login: true,
    register: false
  }
})

在“get”方法中，我想将我的“item”变量绑定到我的“state”变量。因此，例如，结果将是：this.$store.state.active（它会返回'login'）。当我 console.log state.item 时，我得到“未定义”。解决此问题的正确方法是什么，或者我应该尝试完全不同的方法？

Answer 1

这是您代码中的jsfiddle，它正在正确打印存储变量。确保使用正确版本的 Vue 和 Vuex。

const store = new Vuex.Store({
  state: {
    active: 'login',
    login: true,
    register: false
  }
})

var modal = new Vue({
  el: '#vuemodal',
  store,
  data: {
    active: '',
    login: false,
    register: false,
  },
  methods: {
    get: function(item){
      var state = this.$store.state;
      console.log("state is ", state[item])
      return state.item;
   }
 }
})