titouancreach / vuejs-redux

Flexible binding between Vue and Redux
57 stars 11 forks source link

ctx is not defined in data(ctx) function #19

Closed sisou closed 6 years ago

sisou commented 6 years ago

Hello,

I'm using the provider, but not in a webpack-built project, but without the build step. Thus I have this template in my HTML:

<div class="modal-body" id="vue-contact-list">
    <redux-provider :map-state-to-props="mapStateToProps" :map-dispatch-to-props="mapDispatchToProps" :store="store">
        <template slot-scope="{contacts, actions}">
            <contact-list :contacts="contacts" :actions="actions" ref="contactList"></contact-list>
        </template>
    </redux-provider>
</div>

The #vue-contact-list is the mounting point.

Now, when I used your provider component, it told me that Cannot read property 'store' of undefined at https://github.com/titouancreach/vuejs-redux/blob/master/index.js#L23.

Thus I changed data to be

  data() {
    return {
      state: this.store.getState(),
    }
  }

instead.

It works now, but just wanted to let you know, that I have no idea where the ctx comes from. I ran the tests in this repo and it worked, but not in my code :P

titouancreach commented 6 years ago

Hi !

Thanks for commenting.

"ctx" it's just a syntaxic sugar to use this syntax:

data: () => ({

});

Here, you can't use this inside the function because data is an arrow function. So, Vue decided to pass "this" as parameter of this function (that I call ctx).

This was introduced in https://github.com/vuejs/vue/releases/tag/v2.5.0

  • data function is now called with the vm instance as the first argument (#6760) 3a5432a

I suspect that you use a version of Vue below v2.5.0.

Btw, your implementation is nice because it makes the plugin not to rely of a particular version of Vue. If you mind, you can create a PR

thanks

sisou commented 6 years ago

I'm loading from https://cdn.jsdelivr.net/npm/vue/dist/vue.js, so it's 2.5.16 currently.

titouancreach commented 6 years ago

can you make a jsfiddle or whatever to reproduce with your link ? It looks that it's working: https://jsfiddle.net/r3ojnobn/1/

sisou commented 6 years ago

I tried to reproduce here, but I cannot: https://jsfiddle.net/r3ojnobn/113/ I will experiment more the next days.

titouancreach commented 6 years ago

Hi @sisou,

Do you want to do a PR or we should drop the old Vuejs version and close this issue ?

sisou commented 6 years ago

I don't think it's because of an old Vue version, as I am using 2.5.16. But I cannot reproduce it in a test case, so you can close it. We will move to full vue+vuex soon anyway, so it's not a big hassle to keep my own edited copy around until then.

titouancreach commented 6 years ago

Ok :) Thank you for answering, good luck ! Vuex is probably a saner choice :D