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属性
四者的关系:
这里我按着我自己的了解,做了一个流程图,便于自己记忆和理解他们的关系,他们彼此之间的数据的获取也在该图中可以呈现出来