Vuex的核心概念（state,mutations,actions,getters）

Vuex的核心概念

在我们用vue ui可视化创建vuex项目的时候，在项目里面有一个store.js文件，里面定义了与之相关的四个核心概念，具体如下：

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
//通过vue.use函数将vuex安装到项目中
Vue.use(Vuex)
//创建store对象并且把他暴露出来
export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getters: {}
})

核心概念的相关解释：

• State提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中进行存储
• mutation 用于变更store中的数据，且在mutation里面不能处理异步函数，虽然界面能对应更新显示，但是在vue调试器是不能对应更新的，因此异步任务统一在actions里面进行处理
• action 用于处理异步任务，action是没有权限对state里面的数据进行修改的，在这四个核心概念中，只有mutation有权利对state里面的数据进行更新操作，因此在actions中只能通过commit方法去触发mutation里面相关的函数，进而去实现修改state数据的目的。
• getter 用于对store中的数据进行加工处理形成新的数据，依赖于state中的数据，但不会对state数据产生影响，但state数据发送改变时，依赖相关的getter数据也会进行更新，类似Vue的computed属性

四者的关系：

这里我按着我自己的了解，做了一个流程图，便于自己记忆和理解他们的关系，他们彼此之间的数据的获取也在该图中可以呈现出来