JSPM – vue-subscribe-store@0.1.0

Package Exports

vue-subscribe-store

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-subscribe-store) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Why?

Use any store that uses a subscribe method, such as svelte-store, with Vue.js. This package will subscribe to state changes and offer it to Vue in a way that's reactive.
(Optional) Offers the same API as Vuex, so it's easy to convert vuex modules into another store type. This is optional—you could just offer a map of state and have a separate system for updating state. See examples for details.

Examples

import vuesub from 'vue-subscribe-store'
import { writable } from 'svelte/store'

Vue.use(vuesub)

const {
  mapState,
  mapMutations
} = vuesub.store({
  state: {
    value: writable(0), // writable() returns { subscribe }
    foo: 'treated as a static value'
  },
  mutators: {
    setValue(state, next) {
      // receive `state` as is; since we're using svelte-store,
      // writable objects have a .set method
      state.value.set(next)
    },
    resetValue(state) {
      state.value.set(0)
    }
  }
})

Vue.component('example', {
  // integrates `value` in a way that works with vue's reactivity model
  computed: mapState(['value']),
  methods: mapMutations(['setValue', 'resetValue']),
  template: `
  <div>
    <button @click="() => setValue(value + 1)">
      {{ value }}
    </button>
    <button @click="resetValue">x</button>
  </div>
  `
})

map* offers the same API as Vuex, either ['name'] or { rename: 'name' }. Currently no support for sub-modules, so mapActions('moduleName', ['name']) would not work.

Vue.use() will add this.$store to your vue components. It's schema is the same as vuex.

For example:

Vue.component('example', {
  computed: {
    value() {
      return this.$store.state.value
    }
  },
  methods: {
    setName(value) {
      this.$store.dispatch('setName', value)
    },
    ...mapActions(['setAge']),
    ...mapActions({
      setStatus: 'setRelationshipStatus'
    })
  }
})

To use along side Vuex, you can give the store an alternative name:

Vue.use(vuex)
Vue.use(vuesub, {
  name: 'svelte'
})

Vue.component('example', {
  created() {
    this.$store   // vuex
    this.$svelte  // vuesub
  }
})

If you are familiar with Vuex, you can provide state, getters, mutators, & actions. You can then integrate them into your vue-component using the mapState, mapGetters, mapMutations, and mapActions.

See the demo directory for a fully functional example.

import vuesub from 'vue-subscribe-store'
import { writable, derived } from 'svelte/store'

Vue.use(vuesub)

const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = vuesub.store({
  state: {
    value: writable(0)
  },
  getters: {
    isEven(state) {
      return derived(state.value, v => v % 2 === 0)
    },
    isOdd(state, getters) {
      return derived(getters.isEven, v => !v)
    }
  },
  mutators: {
    setValue(state, next) {
      state.value.set(next)
    }
  },
  actions: {
    empty({ commit }) {
      commit('setValue', 0)
    },
    change({ commit }, value) {
      commit('setValue', value)
    }
  }
})

Vue.component('example', {
  computed: {
    ...mapState(['value']),
    ...mapGetters(['isEven'])
  },
  methods: {
    ...mapActions(['empty', 'change']),
    inc() {
      this.change(this.value + 1)
    }
  },
  template: `
  <div>
    <button @click="inc">
      {{ value }}
    </button>
    <button @click="empty">x</button>
    <span>{{ isEven ? 'Even' : 'Odd' }}</span>
  </div>
  `
})

vue-subscribe-store

Package Exports

Readme

Vue Subscribe Store

Why?

Examples