Create a new module that needs to be separated in modules.js. The file structure in the module is

Open mutations only declare the methods that will be called in actions Open mutations = {} const actions = {} export default const mutations = {} const actions = {} Export default {namespaced: true, ///namespaced: true makes it a namespaced module. Make sure you add a parent name to the same variable name, concatenate state, mutations, actions}Copy the code

Getters. Js sets vuex data for mapping

const getters = {
  isMobile: state => state.app.isMobile,
  docSource: state => state.app.isMobile ? 10 : 20
}
export default getters
Copy the code

index.js

import Vuex from 'vuex' import getters from './getters' import mutations from './mutations' import createPersistedState From 'vuex-PersistedState' // Vuex data persistence vue. use(vuex) // https://webpack.js.org/guides/dependency-management/#requirecontext const modulesFiles = require.context('./modules', true, /\.js$/) // you do not need `import app from './modules/app'` // it will auto require all vuex module from modules file const modules = modulesFiles.keys().reduce((modules, modulePath) => { // set './app.js' => 'app' const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') const value = modulesFiles(modulePath) modules[moduleName] = value.default return modules }, {}) const store = new Vuex.Store({ modules, getters, mutations, // 1. Vuex plugins: [createPersistedState({storage: Reducer (state) {return {// save only GPS in state // order: state.order, } }, }), ], }) export default storeCopy the code

The mutationsjs file declares methods that are not called through actions