Use eWizard CLI to set up the Vuex store for state management when you initialize a new e-Detailer project. Every Vuex app is a :Store:store:.
Installation
When you initialize your e-Detailer with the wiz init command, select Yes to use Vuex.
eWizard CLI installs the Vuex store and creates the store directory in the project root directory. This directory contains three files according to the Vuex application structure guidelines.
. └─ store/ ├─ actions.js ├─ index.js └─ mutations.js
To register Vuex, eWizard CLI creates the store.js file in the extensions directory. The Vuex instance is created and passed to the Vue app instance as an option.
The store initialization function is defined in store/index.js along with your app state.
// ./store/index.js
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';export default () => new Vuex.Store({
state: {},
actions,
mutations,
});
Limitations for the SPA and MPA builds
You can use the Vuex store without any limitations if you export your e-Detailer as an :SPA: build.
As for the :MPA: builds, only the e-Detailers exported to the :Veeva_iRep: format support Vuex. Direct changes of the Vuex state outside the mutation handlers aren't supported and must be avoided.
NOTE: Since each slide of the MPA build is a separate instance, the eWizard.js engine initializes the store state once you create the slide instance.