vuex的五个属性及使用方法_vue应用程序状态管理之超详细vuex使用分析实战案例...

98119a34ecf87a0ad1e21e29f099452c.png
1616c092e3b1adbbecc58024d2710fe5.png
eca998caeacce6f358b3ab887cd2267f.png

小白:“是的,我认真的读了一遍”

“good,那么你运行过官方的代码示例吗?” 老麦克继续问。

“额~,这个好像还没有。” 小白摇头

“好吧,你应该把官方提供的案例在你的电脑上运行一下,感受下vuex的作用” 麦克黑建议道。

“那么我开始我的讲解”

我并不想照本宣科的来讲,但请允许我列出最主要的核心对象并结合自己的方法做一番介绍:

本质上Vuex只做了一件事,就是Vue应用程序的状态管理。 他有五个默认的基本的对象:

  • state: [规定;声明;陈述]。 他的作用就是声明遍历,存储状态数据,你不觉的他类似于Vue里的data吗?
  • getters: [获得者;得到者]。 状态(state)的计算属性,对标Vue里的的computed 计算属性。
  • mutations[突变;变化;转变]:这个单词让我想到了范海辛里的狼人和生化危机里的病变僵尸。他对标与Vue里的mothods方法,注意他的同步的。
  • actions:[ 行动,动作] 需要注意的是他的异步的,很多数据获取的工作,比如调用api接口都在这里完成。
  • modules:store的子模块,在开发大型项目的时候你一定会用的上。

小白:你的讲解让我对vuex有了更清晰的认识,但我更希望您能通过一个案例来进行讲解。

老麦克耸耸肩说:“没问题,我需要喝杯咖啡补充能量,但我的咖啡喝完了” 。

“没问题,我来搞定”

须臾,一杯香气四溢的咖啡放在了麦克黑的面前。

“非常棒的咖啡”

“那么我们继续~”

我首先从一个最简单的小例子开始讲起。

首先你需要创建一个Vue项目,并安装 Vuex

Vue create yourAppNamenpm install vuex —save

然后在你的项目里新建一个文件夹,我们通常管这个文件夹叫 store或者vuex ,然后在文件夹里创建index.js

3dc7917a7f3ed9c550702fd35391833f.png

state对象:

然后我们在store/index.js文件中写入如下内容:

70ce8f3b430eca3280922def7d274044.png

并在main.js中进行引入。

63b88df470f09c7f68943e0fb51cf8fe.png

然后就可以在你的项目里到处引用了。比如我们在components 文件夹下建立一个test.vue用来测试一下。记得把test.vue引入到你的app.vue中。

components/test.vue 里输入代码如下:

a11cd77d35fd4263b1fa8d8330f12f5d.png

那么你将看到如下页面:

c2b7b7965405af4fef8260ed71f1624a.png

你也看到了 我们使用 $store.state.count 将 state对象上的属性都暴漏给页面了。

接下来我们就可以使用同步和异步的方式来操作vuex种state,接下来,从某种意义上来说,vuex 主要就是用来对state(数据状态)操作并暴漏出去的。

getters对象

getters对标Vue里的的computed 计算属性。我来举个例子,

然后我们在store/index.js文件中写入如下内容:

5208c8a28e7274024213120af2136cf8.png

然后在test.vue组建中进行使用:

bd3a694a5c21b29ccb53e4324b3cf9d7.png

然后再预览下看看:

d9e566822b0c582588821c6afabea5d5.png

mutations对象

接下来我们继续完善store/index.js中的代码:

3baac5d543e9e5a4456ab827ce37bbff.png

然后在我们的test.vue 组中进行调用:

57a10acec83718821bdee560ee20dc3a.png

tips:你看我们在暴漏 vuex 中mutations方面的时候使用的是 this.$store.commit 方法。

actions对象

上面代码很简单相信你都理解,接下来我们来继续看下 actons的使用,继续更新store/index.js中的代码:

67fefb0e47f5a928288e472195f85a60.png

不知道你主要到没,大多数情况下,actions中的函数都会触发 mutations中的方法。

然后我们再看下在页面组件中如何使用actions方面中的函数

288ed8a4a31cbb1a6f10c804d2b2da4b.png

tips: 你看我们在暴漏 vuex 中actions方面的时候使用的是 this.$store.dispatch方法。

小白:每次调用都要用这种链式写法太麻烦了,一大串的英文单词太丑了,我记得官方文档中提到了更快捷的方式,可以说下吗?

“不错,有进步,不想偷懒的程序员不是好的程序员,我们来看下他们的简化调用方式”

29431bab37669981278a098d545b8666.png

你发现了吗,简便的调用方式是将 vuex里的方法映射到了vue里面来。

modules 对象

关于modules 他其实就是在我们的项目过于庞大的情况下才会用到,庞大到我们觉的一个store/index.js 不足以支撑我们的状态控制管理。举个栗子:

我们可以分两个文件来编写:

934e33df54daef434430a9a8d532d74e.png

然后这样来使用他们:

e4cea210139d50e4236a83dd21d0849b.png

小白:”非常感谢,我清楚了vuex 的使用,但我还有一个疑问,vuex中的state,或者 getters 只能在Vue中的computed 中调用吗?我是否可以在Vue data 中直接调用?”

“当然可以!不过 data 是在页面初始化的时候只调用一次,如果在data 中直接使用他,那么就表示,这些数据或者状态你是不希望他们发生变化的。明白吗?”

小白:“最后一个问题,上面的例子太多简单了能不能举一个您在实际工作中的例子呢?”

“好吧,就用我在使用nuxt.js开发过程中的代码讲解一个小案例吧”

9e3cb12ef66800a195e701828ba86c48.png

你看我在nuxt.js服务器端使用异步方通过 $axios.get初始化了数据的状态然后通过调用mustations方法设置了 state 状态。

小白:“太棒了,我已经了解了vuex的使用了,这对我的工作帮助很大”。

小白:“我想问 vuex中的vuexContent , context是指什么?”

“哈,真是个很有上进心的boy,这个问题不错,不过我想等到午餐后才继续我们的谈话,听过附近餐厅的榴莲味的披萨不错”。

小白:“,我请客~”

麦克黑:“很荣幸和你一起共进午餐”。

“对了,你的咖啡从哪里买的?”

“买?我从总经理办公室拿的~”

“噗~”

05e848898f89c526e6f7a7662a98523e.png
已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页