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.
// 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(){
returnthis.$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.