目录结构

• store
  • modules
    • app.js
  • getters.js
  • index.js

ps：不懂可以留言，尽量解答你！

store/modules/app.js

const state = {
  username: '',
};

//自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
const mutations = {
   username(state, name) {
    state.username = name;
  }
};

//自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
const actions = {
  username({ commit }, name) {  
    commit('username', name);
  }
};

export default {
  state,
  mutations,
  actions
}

store/getters.js

//实时监听state值的变化(最新状态)
const getters = {
  username: state => state.app.username
};

export default getters;

store/index.js

该文件不需要进行修改

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex);

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', false, /\.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,
});

export default store;