ejfrancis / vuex-alt

An alternative approach to Vuex helpers for accessing state, getters and actions that doesn't rely on string constants.

Vuex-Alt

An alternative, opinionated approach to Vuex helpers for accessing state, getters and actions that doesn't rely on string constants.

Installation

First install the npm package with

npm install --save vuex-alt

Then use the plugin, passing in the Vuex Store.

import Vuex from 'vuex';
import { VuexAltPlugin } from 'vuex-alt';

// use Vuex as usual
Vue.use(Vuex);

// create your store
const store = new Vuex.Store({ ... });

// use the VuexAltPlugin, and pass it
// the new Vuex Store
Vue.use(VuexAltPlugin, { store });

Prerequisites

Vuex-Alt makes two intentional, opinionated assumptions about your Vuex code:

1. Mutations are only commited from within actions. Components never directly commit mutations. Every mutation has an accompanying action.
2. All Vuex state, getters and actions are organized into Vuex modules.

These two rules lead to more scalable state management code, and more predictable state changes.

API Usage

Vuex-Alt provides an alternative approach to the Vuex helpers for mapState, mapActions, and mapGetters.

The main difference between the Vuex-Alt helpers and the original Vuex helpers is that instead of accepting strings to specify the namespace and action/getter you want, access is done via functions and nested objects.

mapState()

Provide an object that maps local Vuex instance properties to Vuex module properties.

For example, if you have a state property called count on a Vuex store module called counter you would access it like this:

computed: {
  ...mapState({
    count: (state) => state.counter.count
  })
}

mapActions()

Provide an object that maps local Vuex instance methods to Vuex module methods.

For example, if you have an action called increment() on a Vuex store module called counter you would access it like this:

methods: {
  ...mapActions({
    increment: (actions) => actions.counter.increment
  })
}

Now you can access it in your component via this.increment(10).

mapGetters()

Provide an object that maps local Vuex instance properties to Vuex module getters.

For example, if you have a getter called countPlusTen() on a Vuex store module called counter you would access it like this:

computed: {
  ...mapGetters({
    countPlusTen: (getters) => getters.counter.countPlusTen
  })
}

vuex-alt's Issues

Typescript support?

It would be amazing if this module supported typing, as it would lend even more usability to the "non-string-based" vuex approach you've implemented here. Do you have any interest in that? I may be willing to pitch in if it's something you're interested in pulling in.

IE11 problems?

I think this package is awesome!

We are using it in all our projects. But one things we saw is that our app does not work on IE11, and apparently the reason are that we have arrow functions that are not being transpiled, and this arrow functions seem to be from this package. Would you know if that's plausible?

Thanks