状态管理(state)

把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测

require.context（vuex 全局注入 store）

创建自己的（模块）上下文， 它允许您传入一个目录进行搜索，一个标志指示是否应该搜索子目录，还有一个正则表达式来匹配文件。这个方法有 3 个参数（通俗的来说可以通过这个方法筛选出来需要的文件并读取）

• 要搜索的文件夹目录
• 是否还搜索它的子目录
• 一个匹配文件的正则表达式

/**
* @param directory 要搜索的文件夹目录不能是变量，否则在编译阶段无法定位目录
* @param useSubdirectories  是否搜索子目录
* @param regExp 匹配文件的正则表达式
* @return function 返回一个具有 resolve, keys, id 三个属性的方法
          resolve() 它返回请求被解析后得到的模块 id,keys() 它返回一个数组，由所有符合上下文模块处理的请求组成。
          id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
*/
require.context('./modules', (useSubdirectories = false), (regExp = /\.js$/))
// (创建了）一个包含了 demo 文件夹（不包含子目录）下面的、所有文件名以 `js` 结尾的、能被 require 请求到的文件的上下文。

require.context(‘./modules’, false, /.js/)

 全局注入 modules 里所有的 store，一起实例化

如果一个文件内需要引入多个 store，可以直接引入 index，最后直接使用暴露出来的方法

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

Vue.use(Vuex)

// 自动引入modules
const modules = {}
function requireAll(r) {
  return r.keys().map(key => {
    // console.log(key) //./app.js ./user.js ....
    // console.log(r(key).default) // 每个store里面default出来的函数或者值
    const k = key.replace('./', '').replace('.js', '')
    modules[k] = r(key).default
    // console.log(modules)
  })
}
requireAll(require.context('./modules', false, /\.js/))

const getters = {}

// 最后实例化所有的store
const store = new Vuex.Store({
  modules,
  getters
})

export default store

modules 文件下单个文件的 store

import * as fetch from '@/api/index'

const state = {
  list: []
}

const mutations = {
  SET_DATA(state, payload = {}) {
    // Object.entries() 返回的是每个key和value(list 和 [...])
    Object.entries(payload).forEach(([key, value]) => {
      state[key] = value
      // 给state赋值
    })
  }
}

const actions = {
  async fetchData({ state, commit }) {
    const { list } = await fetch.getData()
    commit('SET_DATA', {
      list
    })
    return list
  }
}

export default {
  state,
  mutations,
  actions
}