https://github.com/qgp9/vue-ya-stash
Yet Another simple stash storage for Vue
https://github.com/qgp9/vue-ya-stash
Last synced: about 2 months ago
JSON representation
Yet Another simple stash storage for Vue
- Host: GitHub
- URL: https://github.com/qgp9/vue-ya-stash
- Owner: qgp9
- License: mit
- Archived: true
- Created: 2017-07-06T13:32:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-02T10:05:45.000Z (over 8 years ago)
- Last Synced: 2025-09-15T02:27:11.428Z (3 months ago)
- Language: JavaScript
- Size: 77.1 KB
- Stars: 17
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-ya-stash - Yet Another simple stash storage for Vue ` 📝 4 years ago` (Utilities [🔝](#readme))
- awesome-vue-zh - Vue - 雅藏匿 - 另一个带有更新/补丁事件发射器的存储存储器与v-bind.sync相似 (公用事业 / 国家管理)
- awesome-vue - vue-ya-stash ★17 - Yet Another stash storage with update/patch event emitters simillar with v-bind.sync (Utilities / State Management)
- awesome-vue - vue-ya-stash - Yet Another stash storage with update/patch event emitters simillar with v-bind.sync (Utilities / State Management)
- awesome-vue - vue-ya-stash - Yet Another stash storage with update/patch event emitters similar with v-bind.sync (Components & Libraries / Utilities)
README
# vue-ya-stash
[](https://circleci.com/gh/qgp9/vue-ya-stash)
[](https://gitter.im/qgp9/vue-ya-stash)
[](https://badge.fury.io/js/vue-ya-stash)
Yet Another simple stash storage for Vue
## TL;DR
```bash
npm install vue-ya-stash
```
```js
export default {
stash: ['user', 'ui'],
mounted () {
console.log('this.user.name')
this.$emit('update:user', {...this.user, name: 'Bob'})
this.$emit('patch:ui', 'sidebar.visible', true )
}
}
```
## Design Goals
1. Not too complicated
2. Not too simple
3. Try to keep the standard pattern (`props`-`emit`)
#3 is being specially concerned.
As you see from example, one can effortlessly switch between `props-emit` and `stash` model.
Furthermore ways of universal components for two models will be supported. I wish :)
## Usage
### Install
```sh
npm install --save vue-ya-stash
```
### Setup
```js
import Vue from 'vue'
import stashStore from './stash'
new Vue({
el: '#app',
router,
stashStore,
template: '',
components: { App }
})
```
`./stash/index.js`
```js
import Vue from 'vue'
import VueYaStash from 'vue-ya-stash'
Vue.use(VueYaStash)
var stash = {
user: {
name: 'Ted',
email: 'ted@example.com'
},
ui: {
sidebar: {
visible: true
}
}
}
var stashContainer = new Vue({
data: {
stash: stash
}
})
export default stashContainer.stash
```
### Component
```js
Vue.component('user-card', {
stash: ['user', 'ui'],
created () {
// Access
console.log(this.user.name)
// Update
this.$emit('update:user', {...this.user, name: 'Bob'})
// Patch
this.$emit('patch:user', 'name', 'Bob')
}
});
```
```js
Vue.component('user-card', {
stash: {
name: 'user.name',
sidebar: 'ui.sidebar'
}
created () {
// Access
console.log(this.name)
console.log(this.sidebar.visible)
// Update
this.$emit('update:name', 'Bob')
this.$emit('update:sidebar', {...this.sidebar, visible: true})
// Patch
this.$emit('patch:sidebar', 'visible', true)
}
});
```
### Patch
To update parts of stash, one can use `patch` instead of `update`
```js
this.$emit('patch:key', path_string, update_value)
```
For example after you mounted `stash.ui` from above, you can change `stash.ui.sidebar.visible` with `patch`
```js
Vue.component('nav-bar', {
stash: ['ui']
methods: {
toggleSidebar () {
this.$emit('patch:ui', 'sidebar.visible', !ui.sidebar.visible)
}
}
}
```
A path string can cover dot(`.`) references and also square brackets('[]').
```js
this.$emit('patch:ui', 'sidebar.menu[4].content', 'new value')
```
Path strings should be same as what one does with real javascript syntex.
You can't do
```js
this.$emit('patch:menu', 1, 'new value')
```
But you should do
```js
this.$eimt(`patch:menu', '[1]', 'new value')
```
The path parser will throw errors in advance.
### computed stash
Stash properties can be a computed function which is **Read Only**.
With function forms, `update:foo` or `patch:foo` won't be generated in automatic manner, however I wish we will see `set` option soon.
```js
stash: {
name: stash => stash.user.name.toUpperCase()
}
```