Vlux

Flux-inspired Application Architecture for Vue.js

Usage

stores/counter.js

import {Store} from 'vluex'

export default Store({
  name: 'counter',
  state() {
    return { count: 0 }
  },
  actions: {
    incrementCount() {
      ++this.count
    },
    decrementCount() {
      --this.count
    },
    incrementCountIfOdd() {
      if ((this.count + 1) % 2 === 0) {
        ++this.count
      }
    },
  },
})

components/app.vue

<template>
  Clicked: {{ count }} times
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
  <button @click="incrementIfOdd">Increment if odd</button>
</template>

<script>
import CounterStore from '../stores/counter'

export default {
  mixins: [CounterStore],
  methods: {
    increment() {
      this.$actions.incrementCount();
    },
    decrement() {
      this.$actions.decrementCount();
    },
    incrementIfOdd() {
      this.$actions.incrementCountIfOdd();
    },
  },
}
</script>

main.js

import Vue from 'vue'
import Vluex from 'vluex'
import App from './components/app'

Vue.use(Vluex)

new Vue({
  el: 'body',
  components: { App },
})