目录
一、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。
理解:
名称 | 类比 |
---|---|
Vue Components | 客人 |
Actions | 服务员 |
Mutations | 厨师 |
State | 菜品 |
客人向服务员点菜,服务员传达后厨,后厨经过加工,做好的菜品再传达给客户
注意点:
① 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")
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
})
② 在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")
以上步骤完成之后,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,
};
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
})
count组件中的代码
<template>
<div>
<h3>当前求和为:{{$store.state.sum}}</h3>
<select @click="selectNum($event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</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>
运行结果
(选择数字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
}
}
};
再次运行结果
(仍然为选择数字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