vys

vue-ya-stash

Yet Another simple stash storage for Vue

Showing:

Popularity

Downloads/wk

5

GitHub Stars

17

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

vue-ya-stash

CircleCI VUEYA VUE2 Gitter chat npm version

Yet Another simple stash storage for Vue

TL;DR

npm install vue-ya-stash
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 )
  }
}  

BOOYAH

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

npm install --save vue-ya-stash

Setup

import 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: 'ted@example.com'
  },
  ui: {
    sidebar: {
      visible: true
    }
  }
}

var stashContainer = new Vue({
  data: {
    stash: stash
  }
})

export default stashContainer.stash

Component

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')
    }
});
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

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.

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.

stash: {
  name: stash => stash.user.name.toUpperCase()
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial