Vuex 中的四大核心概念：State、Mutations、Actions、Getters

"Vuex 中的 mapState、mapGetters、mapActions、mapMutations 的使用" Vuex 是一个基于状态管理的库，它提供了四大金刚：State、Mutations、Actions、Getters。其中，State 是Vuex 的状态管理，需要依赖它的状态树。官网说：Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。 State 是一个对象，里面包含了应用层级的所有状态。在Vuex中，我们可以声明一个State，例如： ``` const state = { blogTitle: '迩伶贰blog', views: 10, blogNumber: 100, total: 0, todos: [ { id: 1, done: true, text: '我是码农' }, { id: 2, done: false, text: '我是码农202号' }, { id: 3, done: true, text: '我是码农202号' } ] } ``` Mutation 是一种改变 State 的状态（值）的唯一方法。官网说：更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。例如： ``` const mutation = { addViews(state) { state.views++ }, blogAdd(state) { state.blogNumber++ }, clickTotal(state) { state.total++ } } ``` Getters 是一种从 State 中获取数据的方法。Getters 可以从 State 中获取数据，并返回计算后的结果。例如： ``` const getters = { getViews(state) { return state.views }, getBlogNumber(state) { return state.blogNumber } } ``` Actions 是一种异步操作的方法。Actions 可以包含多个异步操作，并且可以使用Promise来处理异步结果。例如： ``` const actions = { async addView({ commit }) { commit('addViews') }, async addBlog({ commit }) { commit('blogAdd') } } ``` mapState、mapGetters、mapActions、mapMutations 是Vuex提供的一些辅助函数，用于帮助我们更方便地使用Vuex的四大金刚。 mapState 是一个函数，它可以将 State 中的数据映射到组件中。例如： ``` import { mapState } from 'vuex' export default { computed: { ...mapState(['views', 'blogNumber']) } } ``` mapGetters 是一个函数，它可以将 Getters 中的数据映射到组件中。例如： ``` import { mapGetters } from 'vuex' export default { computed: { ...mapGetters(['getViews', 'getBlogNumber']) } } ``` mapActions 是一个函数，它可以将 Actions 中的方法映射到组件中。例如： ``` import { mapActions } from 'vuex' export default { methods: { ...mapActions(['addView', 'addBlog']) } } ``` mapMutations 是一个函数，它可以将 Mutations 中的方法映射到组件中。例如： ``` import { mapMutations } from 'vuex' export default { methods: { ...mapMutations(['addViews', 'blogAdd']) } } ``` Vuex 提供了四大金刚：State、Mutations、Actions、Getters，这些金刚可以帮助我们更好地管理应用程序的状态。同时，Vuex 还提供了一些辅助函数，如mapState、mapGetters、mapActions、mapMutations，可以帮助我们更方便地使用Vuex的四大金刚。