Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crashkonijn/vue-object-state
A library that helps you keep track of changes in your dtos
https://github.com/crashkonijn/vue-object-state
Last synced: about 1 month ago
JSON representation
A library that helps you keep track of changes in your dtos
- Host: GitHub
- URL: https://github.com/crashkonijn/vue-object-state
- Owner: crashkonijn
- License: mit
- Created: 2021-02-13T18:51:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-06-07T09:12:24.000Z (almost 3 years ago)
- Last Synced: 2024-01-08T08:50:21.144Z (5 months ago)
- Language: TypeScript
- Size: 547 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-vue - vue-object-state - Simple object/dto/model state tracking (Components & Libraries / Utilities)
- awesome-vue - vue-object-state - Simple object/dto/model state tracking (Components & Libraries / Utilities)
- awesome-vue - vue-object-state - Simple object/dto/model state tracking (Components & Libraries / Utilities)
README
# vue-object-state
[](https://www.npmjs.com/package/vue-object-state)
[](https://codecov.io/gh/crashkonijn/vue-object-state)
[](https://circleci.com/gh/crashkonijn/vue-object-state)
A typescript library that helps you keep track of changes in your dtos
## Install
```
npm i vue-object-state
```
## Basic example
```typescript
const user = new User({
firstName: 'Eugene',
address: new Address({
street: 'Anchor Way'
})
})
// Create a new state object
const state = new ObjectState(user)
// You can read the state of every sub object and property (typed)
state.isDirty // false
state.properties.firstName.isDirty // false
state.properties.firstName.value // Eugene
state.properties.address.isDirty // false
state.properties.address.street.isDirty // false
state.properties.address.street.value // Anchor Way
// Update any of the properties
state.properties.firstName.value = 'Spongebob'
// It's state is updated, including vue binding
state.isDirty // true
state.properties.firstName.isDirty // true
state.properties.firstName.value // Spongebob
state.properties.address.isDirty // false
state.properties.address.street.isDirty // false
state.properties.address.street.value // Anchor Way
// To retrieve back your object, build the state
const result = state.build()
result instanceof User // true
result.firstName // Spongebob
result.address instanceof Address // true
result.address.street // Anchor Way
// Use the `clean()` method to clear dirty flags. This can be useful after a save, all 'original' values will be set to their current values.
state.properties.clean()
state.properties.firstName.clean()
state.clean()
// Use the `reset()` method to reset dirty values. This will revert everything to their original value.
state.properties.reset()
state.properties.firstName.reset()
state.reset()
// You can also store errors
state.properties.errors // []
state.hasErrors // false
state.properties.firstName.hasErrors = false
state.properties.firstName.errors = ['Whoops']
state.hasErrors // true
```
## Collection
```typescript
const users = [
new User({ firstName: 'Spongebob' }),
new User({ firstName: 'Eugene' })
]
// Create a new collection object
const collection = new CollectionState(users) // CollectionState
collection.count // 2
collection.elements // ObjectState[]
collection.dirtyElements // ObjectState[]
collection.get(0) // ObjectState
collection.add(new User({ firstName: 'Patrick' }))
collection.clean() // calls clean on every element
collection.reset() // calls reset on every element
collection.build() // User[]
collection.values // ObjectStateValues[]
collection.filter((obj: StateValues) => obj.firstName === 'Spongebob') // ObjectState[]
collection.find((obj: StateValues) => obj.firstName === 'Spongebob') // ObjectState | undefined
collection.some((obj: StateValues) => obj.firstName === 'Spongebob') // boolean
```
## StateValues
The StateValues is an object which can be navigated the same way as the original object, using magic getters and setters. This can be especially usefull in tables.
```typescript
const user = new User({
firstName: 'Eugene',
address: new Address({
street: 'Anchor Way'
})
})
const state = new ObjectState(user)
const values: StateValues = state.values
state.properties.firstName.isDirty // False
state.properties.firstName.value // Eugene
values.firstName // Eugene
values.firstName = 'Spongebob'
state.properties.firstName.isDirty // True
state.properties.firstName.value // Spongebob
value.propertiesState // PropertiesState
value.propertiesState.firstName.value // Spongebob
```