0
点赞
收藏
分享

微信扫一扫

【Vue】CompositionAPI 中如何使用 VueX


我们使用composition API的语法来去使用 VueX(叉)。‍‍

那么我们先来复习一下 VueX(叉)它的一个代码的逻辑流程,
首先我要创建一个数据,createStore 创建一个store的这样的数据仓库。

接着我在里面定义state,‍‍如果我想改变state里面数据的值的话,
首先如果异步操作,我要先通过dispatch方法派发一个action,‍‍然后执行对应的 action,action里面去写一些异步的操作,‍‍

action获取到一些数据或者异步操作结束之后,它会调用 commit 方法,然后去执行一个mutation,‍‍

那么mutation才真正的对数据做一个变更,这就是VueX(叉)它的一个使用流程。‍‍

现在我们使用composition API的语法来重新写一下之前我们写的功能。‍‍

代码示例:

【Vue】CompositionAPI 中如何使用 VueX_代码示例

我在首页要去用这个东西?

如果用composition API的语法,我们要写一个setup函数,
setup函数里面,‍‍我想去用 store里面的 name 数据怎么用?

【Vue】CompositionAPI 中如何使用 VueX_异步操作_02

在这里面我们要引入一个useStore方法‍‍,‍‍
有了useStore方法‍‍之后就可以 const name 等于 balabala…。‍‍

然后去使用 store点state点name 获取到 name 变量。

然后就 return name。

保存,我们用name(它的值是dell,见第一张图第三行代码)
然后我们到首页上来看一看,刷新‍‍:

【Vue】CompositionAPI 中如何使用 VueX_数据_03

在首页上 可以看到能打印出dell。

所以如果你用composition API的语法,‍‍如果想使用store里的数据这么用就可以了。‍‍

当然你也可以做一个解构,怎么解构?

可以用一个import‍‍ toRefs from vue。

然后花括号解构,我们这样去写:

【Vue】CompositionAPI 中如何使用 VueX_代码示例_04

我们再到页面上刷,还是能展示出dell:

【Vue】CompositionAPI 中如何使用 VueX_异步操作_05

在About点vue里面,我们也要引用对应的方法。

然后你在About点vue点击这个上面的内容的时候:

【Vue】CompositionAPI 中如何使用 VueX_数据_06

它会出现handleClick这个方法,所以我定一个handleClick方法,‍‍handleClick等于一个箭头函数,

handleClick 我们想改变store里面的数据怎么改变?

比如说像同步的改变直接改变,‍‍那我直接调用store.commit,‍‍触发一个commit这样的提交,

我触发提交的名字叫什么 changeName。‍‍

store触发了changename,这个东西调commit方法的时候,它会直接派发给谁呢?‍‍

我们找到store这个文件:

【Vue】CompositionAPI 中如何使用 VueX_异步操作_07

它会直接派发给mutation,

所以这个时候我们没有调用action,因为它是直接改变数据,‍‍

所以它会派发到mutation这一块。

有写过 changeName这样的提交内容:

【Vue】CompositionAPI 中如何使用 VueX_数据_08

如果要想监听到changeName提交的内容的话:

【Vue】CompositionAPI 中如何使用 VueX_vue.js_09

我要写一个changeName这样的方法。‍‍

当然在这里你可以传递一个内容过来,比如说传递一个hello过去:

【Vue】CompositionAPI 中如何使用 VueX_vue.js_10

那么在‍‍我们的store里面mutation的changeName里面,
changeName 就能接收到你传来的str,就可以改变一下‍‍ name的值。

保存,我们到页面上看一下,刷新到About页面点一下:

【Vue】CompositionAPI 中如何使用 VueX_代码示例_11

这块就变成hello了。

到Home页面它现在还是一个hello:

【Vue】CompositionAPI 中如何使用 VueX_代码示例_12

因为我们现在这个store是全局的store,‍‍它里面的数据在一个地方改变,其他地方都会生效,所以这就是 VueX(叉)强大之处。

假设我们想有一个异步方法去改变一些数据,这个时候我们就不能直接commit了,我们要dispatch‍‍派发一个异步的action出去,

比如说叫getData:

【Vue】CompositionAPI 中如何使用 VueX_数据_13

我们派发一个叫做getData这样的‍‍ action。‍‍

在store里面我们就可以去写一个getData这样的action了。‍‍

比如说名字叫做getData,

【Vue】CompositionAPI 中如何使用 VueX_vue.js_14

比如说这一块‍‍我可以去远程的接口获取一个数据 做一个异步的操作,

当然我也可以模拟一下,比如说setTimeout 就是模拟一个请求,‍‍过两秒钟之后,
比如说我获取了一个叫做hello这样的内容:

【Vue】CompositionAPI 中如何使用 VueX_javascript_15

然后我去改变store里的数据,怎么改变?

【Vue】CompositionAPI 中如何使用 VueX_异步操作_16

我直接commit一个changeName这样的提交。‍‍

当你触发提交的时候,mutation又能感知到你调用了changeName,

然后这里面又会执行这个方法,‍‍

【Vue】CompositionAPI 中如何使用 VueX_代码示例_17

最终我会把我的数据变成什么?变成hello,

所以异步东西放在action里面,‍‍真正要改数据同步的对数据的修改会放到mutation里面去,

然后它们之间通过 commit来通信,‍‍如果你调用commit方法,直接mutations就会执行,

如果你调用dispatch方法,‍‍那么action就会执行。

保存,再到页面上刷新,‍‍到About这里现在是dell:

【Vue】CompositionAPI 中如何使用 VueX_代码示例_18

我点击一下,一二两秒钟之后 它会变成hello:

【Vue】CompositionAPI 中如何使用 VueX_数据_19

这样的话‍‍我们通过composition API的语法写了一下如何去用VueX(叉)这样的过程。‍‍
在composition API里面,我们用到的一个核心的方法叫做useStore:

【Vue】CompositionAPI 中如何使用 VueX_vue.js_20

通过它我们能获取到全局的数据对象,然后有了 store 之后,

我们就可以调用dispatch commit这些方法了。‍‍


举报

相关推荐

0 条评论