通过传递变量获取 Vuex 状态数据

Question

我是 Vue 和 Vuex 的新手，目前我正在尝试像这样将 props 绑定到我的组件：

我的 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（并且它将是 return 'login'）。当我 console.log state.item，我得到 "undefined"。解决此问题的正确方法是什么，还是我应该尝试一种完全不同的方法？

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

通过传递变量获取 Vuex 状态数据

Get Vuex state data by passing a variable

vue.js

vuex