- Consistency - Standardize state/getter/mutation naming
- Easier to read - less boilerplate by accessing literal properties without constants, reducing unnecessary getters
- Organization - Any helper functions go inside getter/mutation/action context - not at top level
- Create a property name on the state object with a default value
- Keep in mind we will prefix this property name get* for getters, set* for mutations (setters)
state: {
editModeEnabled: false,
}
it('defaults to false', () => {
expect(store.state.profiles.editModeEnabled).to.eql(false);
});
- If no getter is needed, you can use property access to read the state:
$store.state.profiles.editModeEnabled
- No constants
- Define mutation as:
mutations: {
setEditModeEnabled(state, arg) {
state.editModeEnabled = arg
}
}
it('sets to true', () => {
store.commit('profiles/setEditModeEnabled', true);
expect(store.getters['profiles/getEditModeEnabled']).to.eql(true);
});
- No
import { mapMutations }
- No
import
of constants - No
mapMutations(<namespace>, { ... }
methods - Define mutation call as:
$store.commit('<namespace/property>', args )
# e.g. $store.commit('profiles/setEditModeEnabled')
- DO NOT IMPLEMENT if the getter reads the state with no other logic
- If get logic is needed, name the getter
get<state property>
e.g.getEditModeEnabled
- Define getter (if logic is needed) as:
getters: {
getEditModeEnabled: state => {
return !!state.editModeEnabled;
}
}
it('returns false', () => {
expect(store.getters['profiles/getEditModeEnabled']).to.eql(false);
});
- No
import { mapGetters }
- No
import
of constants - No
mapGetters(<namespace>, {})
methods - Implement using property style access as:
$store.getters['profiles/getEditModeEnabled']
Only use for async calls, or chaning multiple mutations. Everything else should be a mutation.