1

私は 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 を実行すると、「undefined」と表示されます。これを修正する正しい方法は何ですか、またはまったく別のアプローチを試す必要がありますか?

4

1 に答える 1

2

これがコードの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;
   }
 }
})
于 2016-11-03T11:55:09.720 に答える