Vue js vuex (store.js) steps

[sunmingtao]

Command line

npm install --save vuex

Create store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
      test: 'abc'
    },
})

main.js

import store from './store'

new Vue({
  el: '#app',
  store: store, //so that it's available globally by using this.$store
  render: h => h(App)
})

App.vue

//Don't need to import anything
<script>
export default {
    ...
    console.log("Store test="+this.$store.state.test);
    ...
}
</script>

[sunmingtao]

Actions and mutations

Key points:

• Always have components call actions, then actions call mutations. Although nothing stops you from calling mutations directly from components. It's not advisable to do so.
• Components have to be synchronous, Actions don't.

// component
export default {
  methods: {
    onInput (value) {
      this.$store.dispatch('setValue', value)
    }
  }
}

// action
actions: {
  setValue ({ commit }, value) {
    commit('setValue', value)
  }
}

// mutation
mutations: {
  setValue (state, value) {
    state.value = value
  }
}