Vue ---- 状态管理

介绍:集中式数据管理, 一处修改,多处使用,多个组件依赖于同一状态,来自不同组件的行为需要变更同一状态,生态环境给我们提供了官方插件vuex

1.npm i vuex -S

2 import Vuex from "vuex" 打印console.log(Vuex) 得到Vuex 里的东西 ,Vuex 是个对象

        里面有 store 类 ,map系列函数 ,通讯工具

        1.store 类 打造状态管理实例 挂到vue根身上,控制整个vue应用的数据

        2.map系列函数 ,通讯工具:mapActions,mapMutations,mapGetters,mapState

 3.配置 (插件) 类似于路由配置,创建plugins文件,里面有个vuex.js

vue插件 ,引入vue,安装插件,打造 vuex实例 ,vuex里有个类Store ,new 创造实例,将状态管理实例暴露出去,在main.js中引入,挂载到vue身上

4.角色分工 : component,actions ,mutations ,state , getters

5.component 组件 发送请求,

  1. dispatch (实例方法) ====》 actions

  2. mapActions(函数,通讯工具) ====> actions

  3. mapMutations (函数,通讯工具) ====> mutations

  4. commit (实例方法,通讯工具) ====> mutations

6.actions 做同步异步的业务 commit 实例方法,通讯工具

  1. commit (实例方法,通讯工具) ====> mutations

7.mutations 修改状态 ,突变 state.key=value

8.state 状态 {key:value} ,数据

9.getters (类似于放在外部的计算属性) 读取处理状态 (数据重新计算)想要渲染时找getters

10.component 准备在组件中渲染 拿数据 ,想要渲染时找getters,getters找state拿 再给component

  1. mapGetters(函数,通讯工具) =====》 getters

  2. mapState(函数,通讯工具) =====》state 直接拿数据

  3. 例属state =====>state 拿数据 {{$store.state.count}} 直接拿数据

注意:

  1. 实例方法 (dispatch, commit ):是实例身上的,所以调用实例方法 要先用实例 this.$store.commit

  2. 函数,通讯工具(mapMutations ,mapActions,mapGetters,mapState) :函数,调用vuex这个对象

    1.  import {mapGetters,mapState,mapActions,mapMutations} from 'vuex'

    2. methods:mapActions(['jia','jian','odd','redDate'])

 1. import Vuex from 'vuex', Vuex是个对象,相关成员如下

成员 用途
Store 类,构造状态管理的实例
mapActions 函数,通讯工具
mapMutations 函数,通讯工具
mapGetters 函数,通讯工具
mapState 函数,通讯工具

 2. 状态管理实例 this.$store相关成员

let store = new Vuex.Store({    //打造状态管理实例
    // 角色目录
    // state:{},// actions:{},// mutations:{},// getters:{}
    state,actions,mutations,getters
}) 
export default store  //将实例暴露出去

成员 用途
dispatch 实例方法,通讯工具
commit 实例方法,通讯工具
state 属性,获取公共数据 放所有数据的地方

3.角色分工

component(组件)-> actions-> mutations-> state <-getters(放在外部的计算属性,可以嵌套到组件内部供组件使用)-> ->component
发送请求$store发送请求 同步,异步业务 修改状态 突变 状态 读取处理状态 渲染状态
学生 代课老师 校长 财务 班主任 学生
dispatch commit state.key=value {key:value} state.key {{key}}
mapActions-> <-mapGetters
mapMutations-> --------> <------------ <-mapState
commit-> ------->
<------------ <-例属state
上一篇:Greenplum列存压缩表原理


下一篇:Greenplum列存压缩表索引机制