spyfu / spyfu-vuex-helpers Goto Github PK

Thank you for great helpers.

Is it possible to add ability to pass a filter to mapTwoWayState?

Finding the instance in each mutation / getter can be a bit redundant, leaving this here as a potential solution.

// mutations
export default {
    
    // current
    foo: findInstanceThen((instance, payload) => {
        // ...
    }),
	
    // possible new api
    ...instanceMutations({
        foo(instance, payload) {
            // ...
        },
    }),
}

// getters
export default {
    
    // current
    foo: state => id => {
        const instance = findInstance(state, id) {
          
        // ...
    },
        
    // possible new api
    ...instanceGetters({
        foo(instance) {
            // ...
        },
    }),
};

When simpleInstanceSetters mutations are mapped with vuex mapMutations, vm's id property is ignored and the mapped mutations expects { id, value } type payload.

It would be very helpful to add a mapInstanceMutations helper.

The findInstanceThen helper should throw a couple warnings in development

• When the state does not contain an instances array
• When the payload does not contain an id property
• When the target instance was not found

The findInstanceThen helper should accept a config object to modify the instance array name and id property. We should be able to make a custom version of the helper by partially applying the configuration.

import helpers from 'spyfu-vuex-helpers';

const findInstanceThen = helpers.findInstanceThen.bind(null, {
    stateKey: 'instances', 
    instanceKey: 'id',
});

The above is a bit clunky, but it gets the idea across. We should come up with a cleaner api for customizing the helper.

While working, it's easy to forget that mapTwoWayState does not share the same API as Vuex's mapState function. The following should throw a more descriptive error.

export default {
    computed: {
        ...mapTwoWayState('someNamespace', [
            'whatever',
        ]),
    },
};

Currently, no error is thrown by our helper, and Vue will be unable to access the desired state. This warning will be logged, but it doesn't really help describe why the error is happening.

[Vue warn]: Property or method "whatever" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Applying partial configuration to findInstanceThen causes an error.

Steps to reproduce

• Use the helper with only stateKey or instanceKey defined

Expected result

• The undefined key should use the default value

Actual result

• An error is thrown because the config object is used as a whole, leaving one of the keys undefined

Leaving this here as a reminder to myself to look into it. Something about 0.5.0 or 0.5.1 broke the ability to import helpers. This is possibly caused by the addition of a peer dependency, we need to look into it.