ktsn / vuex-connect Goto Github PK

If a wrapped component has a prop defined in a mixin, that prop's value is not passed to the component.

An example is located here:
https://github.com/devinholloway/mixin-prop-connector

When a component is connected, any attributes passing to it will not propagate to its child. Thus, it blocks any transparent wrapper component.

Would you have time to make some typescript definitions for this library?

Or an example of how to use this with typescript? I see the actual source is built using typescript.

Hello!

I'm having problems using this with .vue files, is there a way you know of to work around this? What seems to be happening is that vue-loader replaces the render function set by insertRenderer.

Hi! I'm making a searchbar and using this library to connect it to a search store. The problem I'm running into is that I need to be able to dynamically switch the store the component is connected to based on the route the user is on, as they can perform different types of searches on different routes using the same searchbar.

My connected searchbar component looks like this:

import { connect } from 'vuex-connect';
import Searchbar from './searchbar';

export default param => connect({
  gettersToProps: {
    searchCriteria: `${param ? `${param}/` : ''}criteria`
  },

  actionsToEvents: {
    'search-updated': `${param ? `${param}/` : ''}updateSearch`
  }
})('Searchbar', Searchbar);

That way in the component I'm adding it to I can do this:

<template>
...
</template>
<script>
  import Searchbar from 'components/searchbar/searchbar-connect';
  export default {
    components: {
      Searchbar: Searchbar('search')
    }
  ...
  }
</script>
<style>
...
</style>

Is there a way to do what I'm trying to do that you know of?

Currently this refers to the component that we are connecting, not the actual component that is hosting it.

example:

import { connect } from 'vuex-connect'
import Foo from '@/components/Foo'

export default {
  name: 'Bar',

  props: {
    id: {
      type: Number,
      required: true
    }
  },

  components: {
    Foo: connect({
      methodsToEvents: {
        save ({ dispatch }, values) {
          dispatch('saveUserData', {
            data: values,
            id: this.id // This is not possible
          })
        }
      }
    })('foo', Foo)
  }
}

Would make sense to be able to pass data from the component instance inside the connect method.

In this example we can't pass the id property of the current component because the context refers to the actual Foo component

Thanks for your time

Cheers

How do I use StateToProps with state in namespace?
Thanks

Given a component such as:
TestComponent.vue
<template> <ul> <li><slot>Default Slot</slot></li> <li><slot name="test">Test Slot</slot></li> </ul> </template>

And using the component:
App.vue
<test-component> <span>This should go in default slot</span> <span slot="test">This should go in test slot</span> </test-component>

If I give TestComponent a connector, all slotted elements (whether they specify a slot name or not) get pushed into the default slot. If I remove the connector, it works properly.

I have a small reproduce-able app here
https://github.com/devinholloway/named-slot-passthrough-connector

vuex-connect seems incompatible with Vue 3. I discovered those issues so far:

• no default Vue import (currently used for Vue.extend, which has been removed)
• render function doesn't provide h anymore, needs to be imported from vue
• render function props flattened
• lifecycle destroyed renamed to unmounted, beforeDestroy -> beforeUnmount
• $listeners removed
• $scopedSlots removed

Do you have plans to release a new version for Vue 3?

The component we are connecting to the Vuex store, because it's wrapped with the vuex-connect, is not able to communicate with its parent via events.

As described in this section of the documentation, could be possible to just pass all listeners down using v-on="$listeners"

Thanks for your time

thanks for the great work. it's awesome for someone coming from reactjs. I need to be able to connect methods to a component. How do you do that with vuex-connect?

Hi. Thanks for the useful library!

However, I noticed that the wrapped component that vuex-connect generate has some drawbacks when trying to use with vue-router. Do you have any plan to improve the integration with vue-router?

1. In-component guards hooks

These component hooks are used by vue-router, but currently no way to declare them.

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

https://router.vuejs.org/en/advanced/navigation-guards.html#in-component-guards

2. Declaring props for accepting router's parameters

Props are used to pass parameters from 'vue-router`.

This is in reference to this Vue update: https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

When using a connector, if I, for example, specify a model definition of:

model: {
prop: 'customProp'
}

the 'customProp' prop will not get populated by v-model. The 'value' prop will continue to be populated.

When specifying slots (named or unnamed) in a vuex-connect component, the slot values aren't being applied.

When importing the base component, the page shows the custom slot content as you'd expect. When importing the wrapped component, the default slot content appears.

I've got a minimal demonstration of this here. The slot content is being customized in App.vue.

Seems to be working fine except for a warning:

WARN [email protected] requires a peer of vuex@^2.0.0-rc but none is installed. You must install peer dependencies yourself.

Can we update the peer dependency to

'>= 2.0.0'

You would know better if there are any issues with doing that.

Thanks

I have a route defined as:
{
path: '/batches/:batchId/books/:bookId',
name: 'Book',
component: BookContainer,
props: true
}

BookContainer is a vuex-connect component wrapping Book component.

Notice I have props:true, which should pass both batchId and bookId as props to BookContainer (which should pass them on to Book.

I've defined both props in Book:

props: {
batchId: {
type: String,
required: true
},
bookId: {
type: String,
required: true
}
}

I visit '/batches/1/books/2' and batchId is correctly set but bookId is always undefined.

I can't find the sample code.

Hi there,

I have a lot of wrappers which will need the same set of connect mappings. I'm wondering if the library provides a way to keep this DRY or if I should just store the mappings in a const somewhere and import it whenever I need the set of wrapper mappings that go together? I'm wondering if maybe there is some kind of mixin or something I can leverage in the wrappers.

Thanks for the great library and any guidance is appreciated.

Not sure if this is a bug, or I just can't figure out how to do it...

Normally, in a connector, I can access the 'this' scope of the component I'm wrapping. However, when using createConnect in order to implement route lifecycle methods, I seem to lose access to 'this'. For example:

beforeRouteLeave(store, to, from, next) {
const someData = this.someData
// undefined even though someData exists
// on the wrapped component's data() model.
}

Is there something additional I need to do?

I am quite skeptical something like this should be possible:

stateToProps: {
  data: (state, component) => state.articles[component.id].data
},

However, is there some way to connect a component to a module based on a namespace that has been provided to the component some way?

I found a similar issue vuejs/vuex#863, which seems related, and in which vuex-connect is mentioned.