这是我参与更文挑战的第5天，活动详情查看： 更文挑战
要理解VueX之前，首先要理解VueX解决了什么问题？在实际开发过程中，我们会遇到一些遇到父传子、父传孙、兄弟之间等之间传值，当然我们可以逐层传递，但是组件层级一旦很深，数据在其之间传来传去，代码重复不说，还不利于维护和阅读，VueX就是为了解决这个问题，给我们提供一个管理多个组件都需要的数据管理池，通过Vuex的API去统一管理数据。
VueX工作流
可以简单对应着下图去理解：
首先，Vue Components通过不同的actionsType，去dispatch(派发)不同的actions(方法)，让不同的actions(方法)去commit(调用)不同的mutations，再让mutations去更改state，最后state通过内部的render去更改视图。
然后注意： mutations里不能写异步方法，如果要写异步方法，则需要写到actions里。
这样，一个大概的VueX工作流基本成型。(先不要急，在脑海里把这个图用自己的话描述出来，到自己用的时候才知道自己应该在哪一步操作)
VueX的API
state、getters、actions、mutations、modules的简单解释
- state：相当于组件的data，也是VueX所要操作的数据，就是多个组件都需要用到的数据。
- getters：相当于组件的computed，经过修饰的data。
- actions：相当于组件的methods异步方法。
- mutations：相当于组件methods同步方法。
- modules：将VueX拆分成独立的模块，可理解成一个个小的index.js。
VueX一般存放store文件下的index.js或者index.ts，然后实际项目一般会把state、getters、actions、mutations抽离成一个个模块(modules)，方便独立管理，但是每个modules里不会有getters，都是单独成一个getters.js，统一获取。
VueX3.x一般是new Vuex.Store({...})，而VueX4.x则是createStore({...})
Store
├── modules
│ ├── app.js
│ ├── token.js
│ └── user.js
├── getters.js
└── index.js
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 引入各模块
import getters from './getters'
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
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
VueX的使用
再次用到上面的图：
我们需要利用到VueX时，可以站在图中Vue Components的角度：
在VueX仓库的state有一个数据我想改变他，我该通过什么途径去改变他呢？
- 异步：
首先，(Vue Components)需要通过指定actionsType，去dispatch(派发)actions(方法)，让actions(方法)去commit(调用)mutations，再让mutations去更改state，最后state通过内部的render去更改视图。
<script>
export default {
data(){
return {
...
}
}
methods:{
this.$store.dispatch('xxx')
}
}
</script>
- 不涉及异步：
首先，(Vue Components)直接去commit(调用)mutations，再让mutations去更改state，最后state通过内部的render去更改视图。
<script>
export default {
data(){
return {
...
}
}
methods:{
this.$store.commit('xxx')
}
}
</script>
state和getters写在computed里，actions、mutations写在methods里
这样，我们就可以通过这一途径，去修改各个组件上都需要用到的数据，而不用层层传递，达到一处修改，各处都修改的效果，状态共享。
细节
this.$store.dispatch('xxx');
this.$store.commit('xxx');
this.$store.getters('xxx');
this.$store.state('xxx');
