If you absolutely must commit two mutations, why not do it from an action? Actions don’t have to perform async operations. You can destructure the commit method in your action the same way you do with state like so: commitTwoThings: ({commit}, payload) => { commit(‘MUTATION_1’, payload.thing) commit(‘MUTATION_2’, payload.otherThing) }
inside any component without having to first import them and then prepend this to the function name What you described is mixin. Vue.mixin({ methods: { capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1); } }) This is a global mixin. with this ALL your components will have a capitalizeFirstLetter method, so you can call this.capitalizeFirstLetter(…) from component … Read more
state references local state and rootState should be used when accessing the state of other modules. let session = context.rootState.instance.session; Documentation: https://vuex.vuejs.org/en/modules.html
You can even make it shorter and use the root Vue instance as the global Event Hub: Component 1: this.$root.$emit(‘eventing’, data); Component 2: mounted() { this.$root.$on(‘eventing’, data => { console.log(data); }); }
In VueJS 2.0, you must pass both state and getters. Getters are passed to other getters as the 2nd Argument: export default foo = (state, getters) => { return getters.yourGetter } Official documentation: https://vuex.vuejs.org/guide/getters.html#property-style-access
This is a known use case. There are different solutions. For example, one can use vuex-persistedstate. This is a plugin for vuex to handle and store state between page refreshes. Sample code: import { Store } from ‘vuex’ import createPersistedState from ‘vuex-persistedstate’ import * as Cookies from ‘js-cookie’ const store = new Store({ // … … Read more
actions in Vuex are asynchronous. The only way to let the calling function (initiator of action) to know that an action is complete – is by returning a Promise and resolving it later. Here is an example: myAction returns a Promise, makes a http call and resolves or rejects the Promise later – all asynchronously … Read more
If you’re going to v-model a computed, it needs a setter. Whatever you want it to do with the updated value (probably write it to the $store, considering that’s what your getter pulls it from) you do in the setter. If writing it back to the store happens via form submission, you don’t want to … Read more
Mutations expect two arguments: state and payload, where the current state of the store is passed by Vuex itself as the first argument and the second argument holds any parameters you need to pass. The easiest way to pass a number of parameters is to destruct them: mutations: { authenticate(state, { token, expiration }) { … Read more
You have access to the dispatch method in the object passed in the first parameter: get1: ({ commit, dispatch }) => { dispatch(‘get2’); }, This is covered in the documentation.