Lesson learned upgrading Vuex from 0.8 to 2.2

A side by side comparison of before and after the upgrade

Update build configuration

Vuex 2 takes the advantage of some new ES6 features, namely spread operator, hence we'll need first get our build environment ready to roll.

$ yarn add babel-preset-stage-3 --dev

Then update babel configuration file.babelrc

// before
{ "presets": ["stage-3"] }

// after
{ "presets": ["es2015", "stage-3"] }

If you're using eslint in the build process, you should probably update its configuration .eslintrc.json as well.

"parserOptions": {
  "sourceType": "module"
}

"parserOptions": {
  "sourceType": "module",
  "ecmaFeatures": {
    "experimentalObjectRestSpread": true
  }
}

Update vuex configuration

The only thing we changed in our project was the logger middle ware.

import createLogger from 'vuex/logger'

export default new Vuex.Store({
  // ...
  middlewares: debug ? [createLogger()] : [],
})

import createLogger from 'vuex/dist/logger'

export default new Vuex.Store({
  // ...
  plugins: debug ? [createLogger()] : [],
})

Update application logic

Before upgrade, state and actions were kept in the vuex property of all of our custom component.

import { changeCurrentPeriod } from 'store/actions'

vuex: {
  getters: {
    currentPeriod: state => state.currentPeriod
  },
  actions: {
    changeCurrentPeriod
  }
}

After upgrade, we'll need mapState and mapActions to pull state and actions into component computed property and methods.

import { mapState, mapActions } from 'vuex'

computed: mapState(['currentPeriod']),
methods: {
  ...mapActions(['changeCurrentPeriod']),
  // ...
}

Couple of things worth to point it out in the example above:

State

instead of mapState to get the state directly, you should probably consider to wrap state with getters, and use mapGetters for getting the state.

if you want to stick with mapState, there's one alternative syntax you may wanna know

// besides array, mapState can also take an object, it will come in handy if you want assign your state data a different name or pull it from the nested property (again, you should use getter is for this)
mapState({
currentPeriod: state => state.period
})

there's a chance you're doing something like this in your component (code sample below). Which will fail after upgrade, the computed property will not be available at that time. Instead, you could put someOtherProp into computed property. But what if you want to write this someOtherProp? computed-setter may be something you could use. Or in the data property, you could always use this.$store.state.someState to grab the global state and assign it to a local state.
```
data() {
return {
someOtherProp: this.stateData
}
},
computed: mapState(['stateData'])
```

Actions

besides changeCurrentPeriod, there are still some other custom methods, we'll need ES6's spread operator ... feature to 'merge' vuex action and our custom methods. (it could also be used for mapState, mapGetters)

what mapActions is doing behind the scenes, it added this method to methods.

changeCurrentPeriod(payloadObject) {
this.$store.dispatch('changeCurrentPeriod', payloadObject);
}

continue with last point, dispatch was used to be the method we called to trigger a mutation, which is no longer the case, with vuex 2, dispatch sends 'message' to actions, and actions commit triggers mutation.

That said, here's the changes we made to our actions.

export const changeCurrentPeriod = ({ dispatch }, from, to) => {
  dispatch(types.CHANGE_CURRENT_PERIOD, from, to)
}

// notice, only one additional parameter is allowed here, 
// hence make the payload a object if you want pass mutation multiple things.
export const changeCurrentPeriod = ({ commit }, payload) => {
  commit(types.CHANGE_CURRENT_PERIOD, payload)
}

genkio / blog