五分钟搞懂Vuex实用知识(小结)


Posted in Javascript onAugust 12, 2019

这段时间一直在用vue写项目,vuex在项目中也会依葫芦画瓢使用,但是总有一种朦朦胧胧的感觉。于是决定彻底搞懂它。

看了一下午的官方文档,以及资料,才发现vuex so easy!

作为一个圈子中的人,决定输出一下文档,如果你仔细看完这篇文章,保证你对vuex熟练掌握。

我把自己的代码上传到了github,大家有需要的可以拉下来:github

先说一下vuex到底是什么?

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分。

也就是说,是我们需要共享的data,使用vuex进行统一集中式的管理。

vuex中,有默认的五种基本的对象:

  • state:存储状态(变量)
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
  • mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions:异步操作。在组件中使用是$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。

下面我们正式开始,一步步使用vuex

1、首先创建一个vue-cli项目

执行下面的命令,创建一个app项目(这里也可以使用其他非webpack模板,以及非app名称)

vue init webpack app

五分钟搞懂Vuex实用知识(小结)

2、创建完成之后,我们进入文件夹下,并且运行项目

cd app/ 
npm run dev

接下来我们在src目录下创建一个vuex文件夹

并在vuex文件夹下创建一个store.js文件

文件夹目录长得是这个样子

五分钟搞懂Vuex实用知识(小结)

3、目前我们还没有引入vuex,我们需要先下载vuex,并且引入它

在保证我们处于我们项目下,在命令行输入下面命令,安装vuex

npm install vuex --save

五分钟搞懂Vuex实用知识(小结)

4、安装成功之后,我们就可以在store.js中尽情玩耍我们的vuex了!

在store.js文件中,引入vuex并且使用vuex,这里注意我的变量名是大写Vue和Vuex

import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 
const state = { 
 count: 0 
} 
export default new Vuex.Store({ 
 state 
})

五分钟搞懂Vuex实用知识(小结)

接下来,在main.js中引入store

import Vue from 'vue' 
import App from './App' 
import router from './router' 
import store from './vuex/store' // 引入store 
Vue.config.productionTip = false 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 router, 
 store, 
 components: { App }, 
 template: '<App/>' 
})

然我我们在任意一个组件中就可以使用我们定义的count属性了。

这里我们在helloWorld中使用一下,去除helloworld.vue中不用的标签

<template> 
 <div class="hello"> 
 <h3>{{$store.state.count}}</h3> 
 </div> 
</template>

打开我们刚才运行项目的浏览器,可以看到已经使用成功了!

五分钟搞懂Vuex实用知识(小结)

并且在vue开发工具中我们可以看到我们定义的变量count

五分钟搞懂Vuex实用知识(小结)

到这一步,已经成功了一小半!vuex很简单吧?

回想一下,我们只需要在下载安装使用vuex,在我们定义的store.js中定义state对象,并且暴露出去。

在main.js中使用我们的store.js(这里是为了防止在各个组件中引用,因为main.js中,有我们的new Vue 实例啊!)

现在我们已经使用了vuex中的state,接下来我们如何操作这个值呢? 没错!用mutations和actions

我们继续操作store.js文件

我们在sotre.js中定义mutations对象,该对象中有两个方法,mutations里面的参数,第一个默认为state,接下来的为自定义参数。

我们在mutations中定义两个方法,增加和减少,并且设置一个参数n,默认值为0,然后在Vuex.Store中使用它

/** 
 * mutations 里面放置的是我们操作state对象属性的方法 
 */ 
const mutations = { 
 mutationsAddCount(state, n = 0) { 
 return (state.count += n) 
 }, 
 mutationsReduceCount(state, n = 0) { 
 return (state.count -= n) 
 } 
} 
export default new Vuex.Store({ 
 state, 
 mutations 
})

然后我们在helloWorld.vue中,使用这个方法

还记得我们如何在组件中使用mutations吗?就和自定义事件非常相似

<template> 
 <div class="hello"> 
 <h3>{{$store.state.count}}</h3> 
 <div> 
 <button @click="handleAddClick(10)">增加</button> 
 <button @click="handleReduceClick(10)">减少</button> 
 </div> 
 </div> 
</template>
methods: { 
 handleAddClick(n){ 
 this.$store.commit('mutationsAddCount',n); 
 }, 
 handleReduceClick(n){ 
 this.$store.commit('mutationsReduceCount',n); 
 } 
 }

来浏览器看一下效果如何!

我们可以看到每当触发事件时,我们都可以在vue开发工具中看到我们触发的mutations方法,以及参数

完美!

五分钟搞懂Vuex实用知识(小结)

接下来就是actions,actions是异步操作

创建actions对象,并且使用

这里我在两个方法中使用了两个不同的参数,一个是context,它是一个和store对象具有相同对象属性的参数。在第二个函数中,我是直接使用了这个对象的commit的方法。

凭大家喜好就行

const actions = { 
 actionsAddCount(context, n = 0) { 
 console.log(context) 
 return context.commit('mutationsAddCount', n) 
 }, 
 actionsReduceCount({ commit }, n = 0) { 
 return commit('mutationsReduceCount', n) 
 } 
} 
export default new Vuex.Store({ 
 state, 
 mutations, 
 actions 
})

在helloWorld.vue中

在methods中,增加两个方法,使用dispath来触发

<div>异步操作</div> 
 <div> 
 <button @click="handleActionsAdd(10)">异步增加</button> 
 <button @click="handleActionsReduce(10)">异步减少</button> 
 </div>
handleActionsAdd(n){ 
 this.$store.dispatch('actionsAddCount',n) 
 }, 
 handleActionsReduce(n){ 
 this.$store.dispatch('actionsReduceCount',n) 
 }

进入浏览器看下效果如何!

最后就是getters

我们一般使用getters来获取我们的state,因为它算是state的一个计算属性

const getters = { 
 getterCount(state, n = 0) { 
 return (state.count += n) 
 } 
} 
export default new Vuex.Store({ 
 state, 
 mutations, 
 actions, 
 getters 
})
<h4>{{count}}</h4>
const getters = { 
 getterCount(state) { 
 return (state.count += 10) 
 } 
}

getters算是非常简单的了。

到这里,如果全都看懂了,vuex你已经没有压力了。

但是vuex官方给了我们一个更简单的方式来使用vuex, 也就是 {mapState, mapMutations, mapActions, mapGetters}

只要我们把上面基础的搞懂,这些都不在话下,只是方面我们书写罢了。

就这么简单,这里我们用到了es6的扩展运算符。如果不熟悉的同学还是去看看阮一峰大神的《Es6标准入门》这本书,我是看完了,受益匪浅!

<script> 
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex' 
export default { 
 name: 'HelloWorld', 
 data () { 
 return { 
 msg: 'Welcome to Your Vue.js App' 
 } 
 }, 
 methods: { 
 ...mapMutations({ 
 handleAddClick: 'mutationsAddCount', 
 handleReduceClick: 'mutationsReduceCount' 
 }), 
 ...mapActions({ 
 handleActionsAdd: 'actionsAddCount', 
 handleActionsReduce: 'actionsReduceCount' 
 }) 
 // handleAddClick(n){ 
 // this.$store.commit('mutationsAddCount',n); 
 // }, 
 // handleReduceClick(n){ 
 // this.$store.commit('mutationsReduceCount',n); 
 // }, 
 // handleActionsAdd(n){ 
 // this.$store.dispatch('actionsAddCount',n) 
 // }, 
 // handleActionsReduce(n){ 
 // this.$store.dispatch('actionsReduceCount',n) 
 // } 
 }, 
 computed: { 
 count(){ 
 return this.$store.getters.getterCount 
 } 
 } 
} 
</script>

同理,getters和 state也可以使用 mapState,mapGetters

如果你更懒的话,我们可以使用数组,而非对象,或者es6里面的对象简写方式

就像这种

五分钟搞懂Vuex实用知识(小结)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 #Javascript
Angular8基础应用之表单及其验证
Aug 11 #Javascript
浅谈javascript错误处理
Aug 11 #Javascript
axios异步提交表单数据的几种方法
Aug 11 #Javascript
node.js实现带进度条的多文件上传
Mar 27 #Javascript
基于Express框架使用POST传递Form数据
Aug 10 #Javascript
Vue实现点击显示不同图片的效果
Aug 10 #Javascript
You might like
PHP实现验证码校验功能
2017/11/16 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python实现文本界面网络聊天室
2018/12/12 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
python 标准差计算的实现(std)
2019/07/29 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
网游商务专员求职信
2013/10/15 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
创意婚礼策划方案
2014/05/18 职场文书
党员演讲稿
2014/09/04 职场文书
初中体育教学随笔
2015/08/15 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android