Vue学习第22天——Vuex安装使用详解及案例练习（彻底搞懂vuex）

一、Vuex概念

1、概念

在Vue中实现集中式数据管理的一个Vue插件，对Vue中的多个组件的共享状态进行集中式的管理（读取与修改）

2、用途

一种组件间的通信方式，并且适用于任意组件间通信

3、何时用

① 多个组件依赖同一数据
② 来自不同组件的行为需要变更同一数据
理解：多个组件需要共享数据时

4、Vuex三个重要组成部分

①action：组件中的用户动作
②mutation：修改state中的数据
③ state：保存具体的数据
以上三个部分本质都是对象，而且都必须经过store的管理

二、Vuex工作原理

1、原理图

2、工作流程分析

① 在组件中使用 this.$store.dispatch('xxx') 分发 action
② action函数接受一个context对象，调用 context.commit 提交一个 mutation
③ mutation中的回调函数第一个参数必须为state
④ 每当 store.state.xxx 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
理解：

客人向服务员点菜，服务员传达后厨，后厨经过加工，做好的菜品再传达给客户

注意点：
① Action 可以包含任意异步操作
② Mutation 必须是同步函数
③ 当数据不需要从外界获取时，可以省略action这个部分，直接通过组件commit提交一个mutation

三、搭建Vuex环境

1、下载并使用vuex库

① 下载vuex库

npm i vuex
注意点：vue2中必须使用vuex3版本，vue3中必须使用vuex4版本

② 引入

import Vuex from "vuex"

③ 使用vuex

Vue.use(Vuex)

④ 使用vuex之后，在创建vm的时候就可以传入一个store配置项

new Vue({
	//使用vuex之后，创建vm的时候可以传入一个store配置项
    store,
    render:h=>h(App),
}).$mount("#app")
1
2
3
4
5

2、配置store配置项

store是vuex中的最为核心的组成部分，见到store相当于见到vuex

① 创建文件

文件路径：第一种：官方推荐 src/store/index.js 或 第二种：src/vuex/store.js

//引入vue
import Vue from "vue";

//引入vuex库
import Vuex from "vuex";

// 使用vuex
Vue.use(Vuex)

//actions用于响应组件中用户的动作
const actions ={};

//mutations用于修改数据（state)
const mutations ={};

//state保存具体的数据
const state = {};

//store管理以上三个对象，并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

② 在main.js中引入store配置项

//引入vue
import Vue from "vue";
import App from "./App";

//引入store
import store from "./store";

new Vue({
	//使用vuex之后，创建vm的时候可以传入一个store配置项
    store,
    render:h=>h(App),
}).$mount("#app")
1
2
3
4
5
6
7
8
9
10
11
12

以上步骤完成之后，vuex就配置成功，接下来vm和组件实例身上都会出现store配置项，我们也能在$store身上看到commit和dispatch

四、vuex的基本使用

1、初始化state、配置actions和mutations

//actions用于响应组件中用户的动作
const actions ={
	//第一种写法
	//context相当于一个小型的store
    add(context,val){
        context.commit("ADD",val)
    },  
    //第二种写法：通过ES6结构赋值的方法简写
	//add({commit},val){
       // commit("ADD",val)
   // },  
};

//mutations用于修改数据（state)
const mutations ={
    ADD(state,val){
        state.sum +=val;
    },
};

//初始化数据（state相当于一个小型的data）
const state = {
    sum:0,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2、组件读取vuex中的数据

$store.state.sum

3、组件修改vuex中的数据

this.$store.dispatch("actions中的方法名",数据) 或者this.$store.commit("mutation中的方法名",数据)

五、vuex案例练习

需求：通过vuex实现count组件展示和修改数据

store/index.js文件代码

//引入vue
import Vue from "vue";

//引入vuex库
import Vuex from "vuex";

// 使用vuex
Vue.use(Vuex)

//actions用于响应组件中用户的动作
const actions = {
    //ES6语法的简写形式
    //add({commit},num){
        //commit("ADD",num)
    //},
    //数据需要业务逻辑判断
    odd(context,num){
        if(context.state.sum %2 !=0) {
            context.commit("ODD",num)
        }
    }
};

//mutations用于修改state中的数据
const mutations = {
    ADD(state,num){
        state.sum +=num;
    },
    ODD(state,num){
        state.sum +=num;
    }
};

//state保存sum数据
const state = {
    sum:0,
};

//store管理以上三个对象，并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

count组件中的代码

<template>
  <div>
    <h3>当前求和为：{{$store.state.sum}}h3>
    <select @click="selectNum($event)">
      <option value="1">1option>
      <option value="2">2option>
      <option value="3">3option>
    select>
    <button @click="addNum">+button>
    <button @click="oddNum">sum为奇数再加button>
  div>
template>

<script>
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  methods:{
    selectNum(){
      this.num = Number(event.target.value)
    },
    addNum(){
      //this.$store.dispatch("add",this.num);
      this.$store.commit("ADD",this.num)
    },
    oddNum(){
      this.$store.dispatch("odd",this.num)
    }
  }
}
script>

<style>
button {
  margin-left: 5px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

运行结果
（选择数字3，点击+号按钮1次，再点击奇数按钮1次的运行结果界面）

六、案例总结

1、判断业务逻辑的代码写在actions中，mutations不涉及业务逻辑

2、如果不需要加工数据或发送ajax请求，组件可以直接commit一个mutation（不写dispatch，直接用commit，比如本案例中的addNum事件）

3、actions中的函数名小写，mutations中的函数名大写

4、从vuex开发者工具可以看出，开发者工具是直接与mutations对话的（开发者工具显示的全部为大写函数）

5、action函数中的context参数相当于一个小型的store
输出context

6、如果在actions中修改state中的数据，那么开发者工具失效
验证：
要求：通过actions修改state中的数据（以点击sum为奇数再加按钮为例）
代码变更如下，mutations中的ODD函数删除，其余代码不变

const actions = {
    odd(context,num){
        if(context.state.sum %2 !=0) {
            context.state.sum += num
        }
    }
};
1
2
3
4
5
6
7

再次运行结果
（仍然为选择数字3，点击+号按钮1次，再点击奇数按钮1次的运行结果界面）

两个运行图对比，可以发现界面显示效果一样，但是vuex开发者工具中不仅不显示点击奇数按钮事件的mutation，而且state中的数据也不对

七、Vuex进阶

篇幅有限，下一个笔记为进阶学习，getters的使用，点击：Vuex中getters详细讲解及使用案例，与computed计算属性区别
再次进阶，vuex中的4个map的使用，点击：Vuex中的4个map方法的基本用法及案例练习
当需要练习通过actions发送网络请求时：，一个免费的发送ajax请求的API：https://api.uixsj.cn/hitokoto/get?type=hitokoto&code=json