Yet Another simple stash storage for Vue
npm install vue-ya-stashexport 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 )
}
} 
- Not too complicated
- Not too simple
- 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 :)
npm install --save vue-ya-stashimport Vue from 'vue'
import stashStore from './stash'
new Vue({
el: '#app',
router,
stashStore,
template: '<App/>',
components: { App }
})./stash/index.js
import Vue from 'vue'
import VueYaStash from 'vue-ya-stash'
Vue.use(VueYaStash)
var stash = {
user: {
name: 'Ted',
email: '[email protected]'
},
ui: {
sidebar: {
visible: true
}
}
}
var stashContainer = new Vue({
data: {
stash: stash
}
})
export default stashContainer.stashVue.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')
}
});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)
}
});To update parts of stash, one can use patch instead of update
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
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('[]').
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
this.$emit('patch:menu', 1, 'new value')But you should do
this.$eimt(`patch:menu', '[1]', 'new value')The path parser will throw errors in advance.
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.
stash: {
name: stash => stash.user.name.toUpperCase()
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent