I have a vuex file with a growing mass of mutators, but I'm not sure of the correct way of splitting it out into different files.
Because I have:
const store = new Vuex.Store({ vuex stuff }) and then below that my main Vue app declaration: const app = new Vue({ stuff })
I'm happy working with Vue components and have lots of those already, but this is stuff at the top level of the app and I'm not sure how to break it apart. Any advice appreciated.
Answer
For those who would like to break up the Vuex file without creating a more complex modular application structure, I think it is also possible to simply break the actions, mutations and getters into separate files like this:
└── src
├── assets
├── components
└── store
├── store.js
├── actions.js
├── mutations.js
└── getters.js
store.js
import Vuex from 'vuex';
import Vue from 'vue';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
someObj: {},
},
actions,
getters,
mutations,
});
actions.js
const actionOne = (context) => {
...
context.commit('PROP1_UPDATED', payload);
};
const actionTwo = (context) => {
...
context.commit('PROP2_UPDATED', payload);
};
export default {
actionOne,
actionTwo,
};
mutations.js
const PROP1_UPDATED = (state, payload) => {
state.someObj.prop1 = payload;
};
const PROP2_UPDATED = (state, payload) => {
state.someObj.prop2 = payload;
};
export default {
PROP1_UPDATED,
PROP2_UPDATED,
};
getters.js
const prop1 = state => state.someObj.prop1;
const prop2 = state => state.someObj.prop2;
export default {
prop1,
prop2,
};
...then you are able to do stuff from within your components as you please using the usual this.$store.dispatch('actionOne') ...