在这里插入图片描述

基础

作用:

对vue应用中多个组件的共享状态进行集中式的管理(读/写)

  • 包含的内容

state

- 所有状态数据
- 一般要对数据进行初始化

集中所有数据的对象

  1. vuex管理的状态对象
  2. 它应该是唯一的

getters

- 所有只读计算属性
- 一定会依赖于某个状态数据

包含了只用来读取的计算数据

  1. 包含多个计算属性(get)的对象
  2. 谁来读取: 组件中: $store.getters.xxx

actions

- 包含 n 个间接更新的函数对象
- 一般需要发送请求

用来间接更新数据的方法对象,包含n个方法,来间接更新数据,通常会做异步操作,将操作完成的数据交给mutations函数更新

  1. 包含多个事件回调函数的对象
  2. 通过执行: commit()来触发mutation的调用, 间接更新state
  3. 谁来触发: 组件中: $store.dispatch(‘action名称’, data1) // ‘zzz’
  4. 可以包含异步代码(定时器, ajax)
  • actions函数第一个参数是一个对象:store --> 内部有dispatch/commit/state等
    在这里插入图片描述
    在这里插入图片描述

  • actions函数第二个参数:外面调用dispatch传递过来的数据

 // 因为action函数啥也没做
 // 直接调用mutation函数
 this.$store.commit("INCREMENT", this.num);	

mutations

- 包含 n 个直接更新的函数对象
- 一般直接对 state 数据进行修改(不应该在做其他额外操作了,比如发送请求)
  • 用来直接更新数据的方法对象
  • 直接对数据进行操作(数据操作后会更新state,从而组件会重新渲染)
  • mutation函数的数量:看要对数据更新的操作的几种方式
    mutation函数第一个参数:state --> 所有状态数据
    mutation函数第二个参数:num --> 就由上一步actions负责传递过来
  1. 包含多个直接更新state的方法(回调函数)的对象
  2. 谁来触发: action中的commit(‘mutation名称’)
  3. 只能包含同步的代码, 不能写异步代码

mutation-types

- mutation 函数的类型常量模块

store对象

store对象中包含读取数据和更新数据的方法

  1. 所有用vuex管理的组件中都多了一个属性$store, 它就是一个store对象
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
});

export default store;

映射store

mapState 映射vuex状态数据到组件data数据中
mapGetters 映射vuex getters数据到组件computed数据中
mapActions 映射vuex actions函数到组件methods中
mapMutations 映射vuex mutations函数到组件methods中

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

methods: {
  ...mapActions(["incrementIfOdd", "incrementAsync"]),
  ...mapMutations(["INCREMENT", "DECREMENT"]),
  increment() {
	  // 调用的就是mutation函数
	  this.INCREMENT(this.num);
  },
}

computed: {
  ...mapState(["count"]),
  ...mapGetters(["oddOrEven"]),
},


mapState

  • 映射vuex状态数据到组件data数据中
 mapState(["count"])的返回值是一个对象

 {
   count() {
     return this.$store.state.count
   }
 }

mapGetters

  • 映射vuex getters数据到组件computed数据中

mapActions

  • 映射vuex actions函数到组件methods中

mapMutations

  • 映射vuex mutations函数到组件methods中

vuex 工作流程

读取

- 组件直接调用 this.$store.state.xxx
  - mapState(['count'])
- 组件直接调用 this.$store.getters.xxx
  - mapGetters(['oddOrEven'])

更新

- 组件调用 this.$store.dispatch('action 函数名称', 数据)
  - mapActions(['increment'])
- 触发某个 actions 函数,actions 函数中发送请求,请求成功调用 commit('mutation 函数名称', 数据)
- 触发某个 mutations 函数,mutations 函数就会对 state 数据进行直接修改
- 数据一旦更新,因为响应式的原因,所以用户界面也会发生变化

- 组件调用 this.$store.commit('mutation 函数名称', 数据)
  - mapMutations(['INCREMENT'])
- 触发某个 mutations 函数,mutations 函数就会对 state 数据进行直接修改
- 数据一旦更新,因为响应式的原因,所以用户界面也会发生变化

思考:

  • 状态数据要不要定义在 vuex 中?
    • 看数据是否有多个组件要使用(显示、操作)
  • 要对 vuex 的数据进行操作,要不要 actions?
    • 要数据需不需要进一步处理(操作:发送请求…)
  • mutation 函数要定义多少个?
    • 看要对数据进行几种类型的操作

流程图

actions函数内部调用commit触发某个mutation函数
actions里面不会修改数据,只负责请求一些异步数据
发送请求,异步操作 要对数据的操作都放在actions中
在vuex中,dispatch触发的是Actions函数,修改数据是mutations直接修改state数据,state数据是双向绑定的,所以它变化页面也变化
在这里插入图片描述

使用

yarn add vuex

yarn add vuex

基本结构

在这里插入图片描述

src => store => index.js

import Vue from "vue";
import Vuex from "vuex";

// 安装插件,Vuex也是vue的一个插件所以需要安装
Vue.use(Vuex);

/* 集中管理所有数据的对象 */
const state = {};

/* 间接更新数据的方法对象  包含n个方法来间接更新数据 */
// 通常会做异步操作,将操作完成的数据交给mutations函数更新
const actions = {};

/* 用来直接更新数据的方法对象 */
// 直接对数据进行操作(数据操作后会更新state,从而组件会重新渲染)
const mutations = {};

// store对象中包含读取数据和更新数据的方法
const store = new Vuex.Store({
  state,
  actions,
  mutations
});

// 最终组件要用的就是store
export default store;

引入

import Vue from "vue";
import App from "./App.vue";
// 在main.js中引入store
import store from "./store/index";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  // 应用store
  store
}).$mount("#app");

在组件中定义方法

  • 调用dispathch
 increment() {
   // 更新vuex数据 --> 页面中要调用dispatch函数
   this.$store.dispatch('increment', this.num);
 },

组件中的this

在这里插入图片描述

actions中的参数

  • actions函数参数,第一个参数是一个对象,第二个参数是外面调用dispatch传递过来的数据
    在这里插入图片描述

vuex调试工具

在这里插入图片描述

getters

在这里插入图片描述

组件操作vuex

  组件操作vuex:
    1.this.$store.state.xxx
    2.this.$store.dispatch(触发的action函数名称, 传递给action的数据);

命名空间

在这里插入图片描述

  • 之前
  • 在这里插入图片描述
    -现在
    在这里插入图片描述
  • 使用
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐