3.2Java全栈开发前端+后端(全栈工程师进阶之路)-前端框架VUE3框架-企业级应用- Vuex

Vuex简介

Vuex概述

Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规

则保证状态以一种可预测的方式发生变化.

试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue,

App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他

们需要共有的父组件通过自定义事件进行实现, A组件想要和B组件通讯往往是这样的:

  1. A组件说: "报告老大, 能否帮我托个信给小弟B" => dispatch一个事件给App

  2. App老大说: "包在我身上, 它需要监听A组件的dispatch的事件, 同时需要broadcast一个事件给B组件"

  3. B小弟说: "信息已收到", 它需要on监听App组件分发的事件

这只是一条通讯路径, 如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的

事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验。

Vuex就是为了解决这一问题出现的,它相当于提供了一个共享数据存储区域。

如何在Vue-cli中引入Vuex

在创建Vue-cli工程时,选择添加Vuex模块,就可以在工程中引入Vuex模块了。

在src文件夹中会出现一个store文件夹,此文件夹中有一个index.js文件,这就是Vuex模块的js文件。

html 复制代码
import { createStore } from 'vuex' 
// Vuex 数据管理框架 
export default createStore({ 
state: { 
}, 
getters: { 
}, 
mutations: { 
}, 
actions: { 
}, 
modules: { 
} 
})

在main.js文件中,就会自动添加导入store模块和加载store模块的代码

html 复制代码
import { createApp } from 'vue' 
import App from './App.vue' 
import router from './router' 
import store from './store' 
createApp(App).use(store).use(router).mount('#app')

Vuex的使用

html 复制代码
Vuex中有五个默认的基本对象:
state: state就是Vuex中的公共的状态, 可以将state看作是全局唯一的共享数据仓库。
类似Vue中的data。(state是所以组件共享的;data是某个组件独有的。)
getters: state 的计算属性,类似Vue中的computed 计算属性。
mutations:声明方法,用于修改state。类似Vue中的mothods方法。(只能修改同步数据)。 
actions:声明方法,用于修改state。类似Vue中的mothods方法。(可以修改异步数据)。比如调用api接 
口都在这里完成。 
modules:store的子模块,只在开发大型项目的时候会用的上。

思考:state用于存储共享数据,是非常容易理解的。但是,getters、mutations、actions等是做什么用的,有 什么必要吗?

state的使用

1.在store文件夹下的index.js文件中写入如下代码:

html 复制代码
import { createStore } from 'vuex' 
export default createStore({ 
state: { 
num: 10 
}, 
getters: { 
}, 
mutations: { 
}, 
actions: { 
}, 
modules: { 
} 
})

2.在两个组件中都添加如下代码:

html 复制代码
<template> 
<div> 
<div>这是Home {{$store.state.num}}</div> 
</div> 
</template> 
<script> 
export default { 
created(){ 
console.log(this.$store.state.num); 
} 
} 
</script>

两个组件中都会获取state中的数据

我们也可以对state数据进行修改。

html 复制代码
<template> 
<div> 
<div>这是Home {{$store.state.num}}</div> 
<button @click="change">change</button> 
</div> 
</template> 
<script> 
export default { 
created(){ 
console.log(this.$store.state.num); 
}, 
methods:{ 
change(){ 
this.$store.state.num = 20; 
} 
} 
} 
</script> 

上面代码有什么问题吗?

在HomeView.vue文件中,我们通过一个方法修改了state数据。此时我们会发现,其他组件中的state数据也

随之改变了。

这是必然的,因为state本来就是所有组件的共享数据。此时问题就出来了。

如果共享数据可以被任何一个组件随意修改的话,此数据将变得非常不安全。

现在我们知道了,为了保证state共享数据的安全,Vuex不希望在某个组件中随意的修改数据,而是希望对共享数

据的修改都集中在Vuex中,这样才能监控共享数据的修改,保证它的安全。

getters、mutations、actions这些对象的作用就在于此。

getters的使用

1.在store文件夹下的index.js文件中写入如下代码:

html 复制代码
import { createStore } from 'vuex' 
export default createStore({ 
state: { 
num: 10 
}, 
getters: { 
newnum(state){ 
return state.num + 10; 
} 
}, 
... 
})

2.在组件中添加如下代码:

html 复制代码
... 
<h1>{{$store.getters.newnum}}</h1> 
...

组件中就会获取getters中的数据。

mutations的使用

1.在store文件夹下的index.js文件中写入如下代码:

html 复制代码
import { createStore } from 'vuex' 
export default createStore({ 
state: { 
num: 10 
}, 
getters: { 
newnum(state){ 
return state.num + 10; 
} 
}, 
mutations: { 
addMethod(state,param){ 
state.num += param; 
} 
}, 
actions: { 
}, 
modules: { 
} 
})

2.在组件中添加如下代码:

html 复制代码
<template> 
<div> 
<div>这是Home {{$store.state.num}}</div> 
<button @click="change">change</button> 
</div> 
</template> 
<script> 
export default { 
methods:{ 
change(){ 
this.$store.commit('addMethod',6);
} 
} 
} 
</script>

想要访问Vuex中mutations中的方法,需要使用commit方法。此方法有两个参数。

第一个参数:要执行mutations中的方法名。

第二个参数:给执行mutations中的方法传递的参数。

注意:必须要经过commit才能触发 mutation 。

actions的使用

1.在store文件夹下的index.js文件中写入如下代码:

html 复制代码
import { createStore } from 'vuex' 
export default createStore({ 
state: { 
num: 10 
}, 
getters: { 
newnum(state){ 
return state.num + 10; 
} 
}, 
mutations: { 
addMethod(state,param){ 
state.num += param; 
} 
}, 
actions: { 
addMethod(state,param){ 
//这里使用setTimeout模拟异步方法 
setTimeout(()=>{ 
state.commit('addMethod',param); 
},3000); 
} 
}, 
modules: { 
} 
})

2.在组件中添加如下代码:

html 复制代码
<template> 
<div> 
<div>这是Home {{$store.state.num}}</div> 
<button @click="change">change</button>
</div> 
</template> 
<script> 
export default { 
methods:{ 
change(){ 
//this.$store.commit('addMethod',6); 
this.$store.dispatch('addMethod',6); 
} 
} 
} 
</script>

想要访问Vuex中mutations中的方法,需要使用dispatch方法。此方法有两个参数。

第一个参数:要执行actions中的方法名。

第二个参数:给执行actions中的方法传递的参数。

总结

现在对Vuex中的state、getters、mutations、actions做一下总结:

  1. state:存放全局共享数据。使用形式:$store.state.num

  2. getters:计算属性。使用形式:$store.getters.newnum

  3. mutations:处理同步数据的方法。使用形式:$store.commit('addMethod',6);

  4. actions:处理异步数据的方法。使用形式:$store.dispatch('addMethod',6);

先使用 $store.dispatch('addMethod',6); 的方式调用Vuex中的actions。

actions再使用commit方法调用Vuex中的mutations;

相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端