1、模块说明：

 2、模块导入：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: { // vuex分模块: key模块名, value模块配置对象
    app, // 侧边栏对象, 设备型号
    settings, // 侧边栏有logo? 头部是否固定定位
    user // token, name, 等用户信息
  },
  getters // 根上的(方便逻辑页面直接访问, getters内部帮我去映射每个模块里state)
})

export default store

复习知识点1: store里包含5大核心配置项(概念) - 定义

1. state -> 定义变量
2. mutations -> 定义方法(形参1是state, 唯一可以修改state值的地方) -> devTool工具检测到
3. actions -> 定义方法(形参1是store, 异步操作来修改state, 但是也要提交到mutations)
4. getters -> vuex里计算属性 -> 计算返回值
5. modules -> 集中式管理太多, 可以分散到多个模块分别管理(但是最后都要挂载到根store上)

知识点2: 每个moudles对象里还是包含这5个核心概念, 还能继续嵌套管理

知识点3: vuex里的东西, 如何在vue组件页面/js文件里进行使用
类1: 根store里的(不分模块的时候)

1. 直接使用
2. 映射使用

类2: 分模块(不开命名空间)

1. 注意: 只影响state的取值方式
2. mutations和actions和getters还像以前一样使用

类3: 分模块(开命名空间)

1. 使用时, 要带模块名(命名空间名)

3、getters中的集成：

// 此文件可以让逻辑页面直接从getters里取值(根getters不用关心模块名)
// 逻辑页面不需要自己一点点的从state里取值
// 知识点1: 当箭头函数, 函数体"只有一段代码"而且"默认把值返回"可以同时省略大括号和return
const getters = {
  // sidebar(state) {
  //   return state.app.sidebar
  // },
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}
export default getters

4、开启命名空间模块举例-----settings模块：

import defaultSettings from '@/settings'

const { showSettings, fixedHeader, sidebarLogo } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}