Vuex is actually pretty simple, fun to use and gives awesome stuff like the mentioned time travel. A simple example of how you can use Vue2 in Meteor is in my Vuex-Accounts example project, even if it is much more verbose than pure Vue. Of course you won’t be able to use specific features that Akryum provided for his Vuex1 package, which let you to make your subscriptions directly in Vuex and keep collections reactive there without having to setup anything, but it’s easy to do at the template level, like how we recently do that with Meteor+FlowRouter.
Overall, I’d say Vue (with Vuex or not) is more comfortable to handle than Blaze, but less comfortable than Blaze+ViewModel.
Answering your question, yes - somewhere on github issues Akryum stated that Meteor+Vuex goodies from his Vuex1 package won’t work with Vue2. The Vuex2 package is a part of RC roadmap.
But for a simple state management in a small app you don’t even need Vuex. All you need is a Store object if you don’t want to use migrations/getters/actions/whatever but simply use and update the State directly.
Still I’d go with Vuex so you can understand how it works on a small app first.
Now for the simplest Vuex sibling communication. Let’s use your checkbox/input example. Remember to pass the store to the main component if you want it available by default in all children this way:
/imports/ui/app.js
export default {
store
}
/imports/vuex/store.js <- the export.default part here depends on how you initialize the store, as there are at least two options. One is described in my Vuex-Accounts example, the one below is a part of how I do it usually, because it works nice with vuex-router-sync. So first you have to actually initialize Vuex in your app, you’ll find the details in docs.
export default({
state: {
checkbox: false
},
mutations: {
updateCheckbox(state, payload) {
state.checkbox = payload
}
}
})
/imports/ui/checkbox.vue - here we need to make sure v-model on checkbox both updates the store and gets updated by the store, that’s why we’ll use a computed getter and setter. It is more verbose than simple v-model but it will be needed if we use Vuex’s strict mode in which the state can only be updated in the store (and which is I believe the default store behavior in Redux?).
<template>
<checkbox v-model="checkbox">
</template>
<script>
export default {
computed: {
checkbox() {
get() {
return this.$store.state.checkbox
},
set(value) {
this.$store.commit('updateCheckbox', value)
}
}
}
}
</script>
/imports/ui/input
<template>
<input :disabled="$store.state.checkbox" />
</template>
or if we don’t want to use state directly in templates:
<template>
<input :disabled="checkbox" />
</template>
<script>
export default {
computed: {
checkbox() {
return this.$store.state.checkbox
}
}
}
</script>
All of that is explained in Vuex docs of course.
Example is in the making.
).