vue-me v0.3.0
vue-me
This package helps you to seperate concerns within your Vue Class Components. At this state of development it can be used for fast prototyping or small applications.
Due to lack of testing it is not recommended to used this library for business applications.
Heavily inspired by the recompose package provided by acdlite.
Installation
npm i vue-me
- or -
yarn add vue-me
Quickstart
If you've never built a Vue app before or simply haven't found the time to setup a boilerplate, feel free to clone or fork the project below to get started.
git clone https://github.com/nine36/vue-me-starterkit.git
Example
ExampleComponent.js
import {
compose,
Composable,
withState
} from 'vue-me';
class ExampleComponent extends Composable {
render() {
return (
<div>
<div>{this.title}</div>
<button onClick={() => { this.changeTitle('A New Title'); }}>
Change
</button>
</div>
);
}
}
export default compose(
withState('title', 'changeTitle', 'Initial Title'),
)(ExampleComponent);
App.js
<template>
<div>
<ExampleComponent />
</div>
</template>
<script>
import ExampleComponent from "./ExampleComponent";
export default {
name: "App",
components: {
ExampleComponent
}
};
</script>
Api
withAxios
Demo (Use the axios server example locally)
Syntax
withAxios(endpoint, method, state, handler)
Parameter | Type | Description | Required |
---|---|---|---|
endpoint | String | Endpoint for requests | true |
method | String | Request method (GET) | true |
state | String | State identifier | true |
handler | String | Handler identifier | true |
Description
Retrieve data from your server with axios and use it in your component.
Usage
...
return (
<div>
{this.allUsers.map(...)}
<button onClick={this.fetchAllUsers}>Fetch users</button>
</div>
)
...
export default compose(
withAxios('http://localhost:3000/', 'GET', 'allUsers', 'fetchAllUsers')
)(ExampleComponent);
withHandlers
Demo https://codesandbox.io/s/k58jnnp60v
Syntax
withHandler({
[identifier]: (props) => [async](values) => { }
})
Parameter | Type | Description | Required |
---|---|---|---|
props | Object | Component props | false |
values | Object | Handler arguments | false |
Description
Declare handlers to manage more complex logic or async operations.
Usage
...
import { fetchUser } from './api';
...
return (
<div>
{this.user.name}
<button onClick={this.getUser}>Fetch users</button>
</div>
)
...
export default compose(
withState('user', 'setUser', {})
withHandlers({
getUser: ({ setUsers }) => async() => {
const callback = user => setUser(user)
await fetchUser(id, callback)
console.log('process done.')
},
}),
)(ExampleComponent);
withLifecycles
Demo https://codesandbox.io/s/yk72yvnx91
Syntax
withLifecycles({
[identifier]: (props) => () => { }
})
Parameter | Type | Description | Required |
---|---|---|---|
props | Object | Component props | false |
Description
Declare lifecycles to inject into your component.
Usage
export default compose(
...
withLifecycles({
created: () => () => {
console.log('component created')
},
mounted: ({ title }) => () => {
console.log('component mounted', title)
},
}),
)(ExampleComponent);
withNormalizer
Demo https://codesandbox.io/s/4qmy255kmx
Syntax
withNormalizer(state, data, objectIdentifier, <optional>newProperty)
Parameter | Type | Description | Required |
---|---|---|---|
state | String | State identifier | true |
data | Object, Array | Target data | true |
objectIdentifier | String | Object identifier | true |
newProperty | String | New property | true |
Description
This function helps you to normalize your data. It can also be used to replace object identifiers with property values and add the old identifiers as new properties.
Usage
const dataSet1 = [
{
uuid: 'xxx-1',
name: 'Socrates',
},
{
uuid: 'xxx-2',
name: 'Archimedes',
},
]
const dataSet2 = {
'wise': {
uuid: 'xxx-1',
name: 'Socrates',
},
'also-wise': {
uuid: 'xxx-2',
name: 'Archimedes',
},
}
class ExampleComponent extends Composable {
return (
<div>
{Object.assign(this.normalizedDataSet1).map(...)}
{Object.assign(this.normalizedDataSet2).map(...)}
</div>
)
}
export default compose(
withNormalizer(
'normalizedDataSet1',
dataSet1,
'uuid'
),
withNormalizer(
'normalizedDataSet2',
dataSet2,
'uuid',
'stateOfMind'
),
)(ExampleComponent);
withProps
Demo https://codesandbox.io/s/4lqo1ywnn9
Syntax
withProps(name, defaultValue, required)
Parameter | Type | Description | Required |
---|---|---|---|
name | String | Property identifier | true |
defaultValue | String | Default value | true |
required | Boolean | Property is required | true |
Description
Declare component props.
Usage
class ChildComponent extends Composable {
return (
<div>
{this.user.name}
</div>
)
}
const ChildContainer = compose(
withProps('user', { name: 'Socrates' }, false)
)(ExampleComponent);
class ParentComponent extends Composable {
return (
<div>
{/* renders the default 'Socrates' */}
<ChildContainer />
{/* renders 'Archimedes' */}
<ChildContainer user={{ name: 'Archimedes'}} />
</div>
)
}
withService
Demo https://codesandbox.io/s/0oxn09rq4l
Syntax
withService(state, handler, service)
Parameter | Type | Description | Required |
---|---|---|---|
state | String | State identifier | true |
handler | String | Handler identifier | true |
service | Function | Service | true |
Description
Hook up your service to a local state and handler
Usage
import { getUser } from '../api';
...
return (
<div>
{this.user.name}
<button onClick={() => this.getUser('some-id')}>Fetch user</button>
</div>
)
...
export default compose(
withService('user', 'getUser', getUser)
)(ExampleComponent);
withState
Demo https://codesandbox.io/s/ym632o20pj
Syntax
withState(state, mutation, initialState)
Parameter | Type | Description | Required |
---|---|---|---|
state | String | State identifier | true |
mutation | String | Mutation identifier | true |
initialState | any | Initial state | true |
Description
Declare local state and state mutations.
Usage
...
return (
<div>
{this.user.name}
<button onClick={() => this.setUser({ name: 'Socrates' })}>Fetch users</button>
</div>
)
...
export default compose(
withState('user', 'setUser', { name: 'Archimedes' })
)(ExampleComponent);