写在前面：

首先，Vuex是什么：

根据官方的定义：每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state) 。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

什么时候用：

假如项目达到了中大型应用的规模，此时您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

安装配置：

安装：

要想安装Vuex，根据个人习惯，可以采用常见的npm/yarn方式，在命令行窗口输入即可

npm

npm install vuex --save

Yarn

yarn add vuex@next --save

自己构建

如果需要使用 dev 分支下的最新版本，您可以直接从 GitHub 上克隆代码并自己构建。

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
yarn
yarn build

配置：

1.在新建一个src/store文件夹，在此处新建一个index.js，现在就可以开始进行配置了

首先使用require.context()来创建一个包含指定目录中所有模块文件的上下文。这里的上下文会返回一个函数，我们可以通过调用它来获取指定目录中的模块文件。在这个例子中，它的参数是'./modules'，表示要获取当前目录下的modules文件夹中的所有模块文件。

然后使用reduce()方法来遍历所有的模块文件，并将它们导入到一个modules对象中。每个模块文件会被导入为一个对象，并存储在modules对象中，对象的键名是被去除文件扩展名后的模块文件名。

最后只需要再新建一个Vuex.Store对象，把 modules: { ...modules }, plugins: [persistedState()]export出去

import Vue from "vue";
import Vuex from "vuex";
// vuex持久化
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex);

//实现全局自动导入
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})


export default new Vuex.Store({
  modules: {
    ...modules
  },
  plugins: [persistedState()]
});

2.在main.js中引入

import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

至此，安装vuex并且初始化的工作就结束了，此时你可以很轻易的在项目的任意地方访问到仓库里的状态

使用：

1.配置store.js

export default {
    state: {
      
    },
    mutations: {},
    actions: {
     
    },
    getters: { 
     
    }
}

2.在页面中使用：

使用this.$store访问

【Vue】一文说明Vuex如何安装配置，全局自动导入，按模块拆分，以及实际使用