前端-Vuex
目录
一.什么是Vuex
二.使用Vuex
三.State状态
四.mutations
五.actions
六.getters
七.module
八.使用模块中的数据
1.直接通过模块名访问
2.通过mapState映射
开启命名空间：
九.使用模块中的getters中的数据
十.调用自模块中的mutations中的方法
一.什么是Vuex
Vuex是一个状态管理工具，其中所说的状态就是数据。
换句话来说：Vuex是一个插件，可以帮助我们管理vue通用数据（多组件共享的数据）
使用场景：
某个数据需要被很多个组件使用（个人信息）wwwww
多个组件共同维护一份数据（购物车）
优势：
共同维护一份数据，数据的集中化管理
响应式变化
操作简洁（vuex提供了一些辅助函数）
二.使用Vuex
安装Vuex:
创建Vuex模块文件:
创建仓库：
main.js导入挂载:
三.State状态
1.提供数据
State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。
在state对象中可以添加需要共享的数据。
2.使用数据
通过store直接访问
通过辅助函数
使用mapState辅助函数，可以自动将store中的数据映射到组件的计算属性中
四.mutations
vuex中的数据同样遵循单向数据流，组件中不能直接修改仓库的数据，在使用共享数据的组件中，写类似this.$store.state.count++这样的代码是不对的，如果这样写了，Vue原生框架并不会直接报错，因为错误监测是非常消耗性能的。
此时可以使用 strict:true 来开启严格模式，然后运行代码在页面的控制台中就会要错误日志
此时正确的方法是使用mutations来创建方法修改state中的数据。
同样mutations也有简化代码的辅助函数mapMutations，它是将位于mutations中的方法提取出来，映射到组件中的methods方法中
五.actions
actions是vuex中用于处理异步操作的，类似于一秒钟之后将count+6这样的操作，虽然异步代码也可以写在mutations中但是最好将mutations中的代码写为同步的，因为这样便于监测数据变化，记录和调试。
同样actions也有自己的辅助函数用于简化代码，mapActions，将位于actions中的方法提取出来，映射到组件的methods中
六.getters
有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters。
七.module
由于vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象。所以当应用变得非常复杂时，store对象就有可能变的非常的臃肿。（当项目变得越来越大的时候，Vuex会变得越来越难以维护）
单一状态树：
使用modules进行拆分：
此时虽然我们使用modules来进行拆分了，但是其实子模块的状态还是会挂到根级别的state上的，属性名就是模块名。
从上图中可以看到，在根级别的state中挂载的子模块的整体的大对象。
八.使用模块中的数据
1.直接通过模块名访问
此时访问出来的结果是：
从上图来看，可以知道，此时获取的数据是模块中state的整体，想要使用里面的数据是需要在细分的：
2.通过mapState映射
开启命名空间：
九.使用模块中的getters中的数据
1.通过$store.getters[]的方式来获取：
从下图中，可以验证即使是分模块了，依然是挂载到根getters上的：
2.通过mapGetters映射
因为子模块挂载到根getters上的是user/filterUserList并直接是方法名称，所以在没有开启命名空间的时候需要对去重命名来使用：
<script>import {mapGetters} from "vuex";export default {name: "FindVue",created() {console.log(this.$store.getters["user/filterUserList"])},computed: {...mapGetters({userlist: 'user/filterUserList'}),...mapGetters('user', ['filterUserList']),}
}
</script><template><div><hr>通过$store.getters[]的方式来获取：{{ $store.getters["user/filterUserList"] }}<br>通过mapGetters（未开启模块的命名空间）来获取：{{ userlist }}<br>通过mapGetters（开启模块的命名空间）来获取：{{ filterUserList }}<hr><button @click="setAsyncCount(2)">点击返回大于5的数字</button></div>
</template><style scoped lang="less"></style>十.调用自模块中的mutations中的方法
默认模块中的mutation会被挂载到全局，需要开启命名空间，才会挂载到子模块
从上面两图可以看出虽然是在子模块中定义的mutations但是却被挂载到了全局，安装全局的方法直接获取也是可以获取到的：
开启命名空间：
此时需要指定模块来获取：
通过$store.commit获取：
未开启命名空间：
export default {state: { name: '陈陈陈' },mutations: {setName(state, name) {state.name = name}}
}
this.$store.commit('setName', '小明')开启命名空间：
this.$store.commit('user/setName', '小明')十一.调用模块中的action方法
默认模块中的action会被挂载到全局，需要开启命名空间，才会挂载到子模块
未开启命名空间：
开启命名空间：
使用$store.dispatch来获取：
export default {namespaced: true,state: { name: '陈陈陈' },mutations: {setName(state, name) {state.name = name}},actions: {async fetchName({ commit }) {commit('setName', '新名字')}}
}
this.$store.dispatch('user/fetchName')