vuex-store的目录结构

1. 在vuex中，所有的代码都放在了index.js文件中，这使得index.js文件过于复杂，不方便查找与修改，为了更好的管理项目，使用以下方法来进行简化
2. 在store文件夹中创建mutations.js、actions.js、getters.js分别用来存放mutations属性、actions属性与getters属性
3. 对于modules属性，创建modules文件夹，在modules文件夹中存放创建的modules属性
4. 在index.js文件中导入以上文件实现vuex项目

mutations.js

export default {
  // 方法
  updateInfo(state) {
    state.info.name = 'admin';
  }
}

actions.js

export default {
  actUpdateInfo(context, payload) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      context.commit('updateInfo');
    }, 1000);
    console.log(payload);
    resolve('使用Promise进行actions操作');
  });
}
}

getters.js

export default {
  stu() {
    return {
      name: 'Lily',
      age: 20,
      gender: '女',
      grade: 1204
    }
  }
}

moduleA.js

export default {
  state: {
    name: 'testData'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload;
    }
  },
  actions: {
    actUpdateName(context) {
      console.log(context.rootState);
      console.log(context.rootGetters);
      setTimeout(() => {
        context.commit('updateName', 'Name');
      }, 1000);
    }
  },
  getters: {
    fullName(state) {
      return state.name + '0000';
    },
    fullName2(state, getters) {
      return getters.fullName + '1111';
    },
    fullName3(state, getters, rootState) {
      return getters.fullName2 + rootState.message;
    }
  }
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'

import mutations from "./mutations";
import actions from "./actions";
import getters from "./getters";
import moduleA from "./modules/moduleA";

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
  state: {
    info: {
      name: 'abc',
      age: 20,
      height: 1.80,
      num: 1101
    },
    message: 'someMessage'
  },
  mutations,
  actions,
  getters,
  modules: {
    a: moduleA
  }
})

// 3.导出store
export default store

store文件夹目录结构