vuex的知识点笔记
个人学习vuex时的一些随笔
一、vuex的解释和理解
简单来说,就是一个大家都能用的存储变量的对象
二、vuex一般都放什么东西
一般都是放一些多个界面都需要的东西,比如登陆状态信息等
三、vuex的使用
①安装
npm i vuex –save
②在src中创建一个文件夹store(仓库),里面建一个index.js
③在imdex.js中,导入vue,导入vuex,安装vuex插件,创建vuex.Store实例,导出vuex实例
注意:创建vuex实例的时候,是new Vuex.Store()这个方法,命名也是store
import Vue from 'vue' //导入vue,导入vueximport Vuex from 'vuex'Vue.use(Vuex) //安装vuex插件const store = new Vuex.Store({ //这里是Vuex.Store,要注意state:{ count:0}})export default store
④在main.js中导入vuex,在vue实例中注册
import Vue from 'vue'import App from './App'import store from './store/index'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#app',store,render: h => h(App)})
⑤通过$store.state使用存储的状态
例如:在其他组件中通过 $store.state.count 使用count
state:{
count:0
}
四、使用vuex的count
①首先,在store中,在state中定义一个状态count,在组件中通过$store.state.count使用
②修改count的值,通过在mutations定义方法,然后在组件中调用mutations中的方法进行修改state的值,使用时在组件中的methods中定义一个方法,然后通过this.$store.commit()
获取到mutations的方法进行提交
methods: { add(){ this.$store.commit('increment') //通过mutation进行修改state,在这里通过this.$store.commit()方法提交 }, sub(){ this.$store.commit('decrement') }},
五、vuex的单一状态树
一般的,vuex推荐我们只创建一个store,这样方便我们管理和维护
六、vuex的getters
getters:{ //类似于计算属性 powercount(state){ //getters中定义的属性也是默认传入一个state属性 return state.count * state.count }, more20stu(state){ //获取大于20岁的学生 return state.student.filter(s => s.age>20) //通过数组方法中的filter()函数,s为传入的数组,通过箭头函 //头函数,来判断年龄大于20岁的学生 }, more20stulength(state,getters){ //getters中的参数除了state,还可以传入getters,来获取其他getter return getters.more20stu.length }, moreage(state){ //当我们想要给getter传参数时,可以在getter中返回一个函数,这样在使用时传入参数时便能传入 //到函数中,这时候便能在函数中通过参数进行一些操作 return function(age){ //在函数中传入参数,这样便能动态的决定age大小 return state.student.filter(s => s.age>age) } }},
在组件中使用
<h3>{{ $store.getters.powercount }}</h3> <h3>{{ $store.getters.more20stu }}</h3> <h3>{{ $store.getters.more20stulength }}</h3> <h3>{{ $store.getters.moreage(20) }}</h3>
七、vuex中的mutations
①当需要给mutation传递参数时,很简单,在调用方法的时候带上参数即可
addcount(count){
this.$store.commit(‘addcount’,count) //如果想给mutation传递参数,只需要在commit()中的mutation名后面跟上参数即可
}
然后在mutation中接收参数
addcount(state,count){ //mutations接收参数时,可以直接在state后面再加一个参数
state.count += count
}
最后使用方法即可
<button @click=“addcount(5)”>+5
②当需要传的参数有多个的时候,可以以一个对象的形式传参,这叫做给mutation传一个荷载(payload)。这里的stu就是一个payload
addstu(){
const stu = {
id:104,
name:“kirito”,
age:21
};
this.$store.commit(‘addstu’,stu)
}
addstu(state,stu){ //这里传过来的stu是一个对象
state.student.push(stu) //通过数组的push()方法将对象添加进数组
}
③mutation的提交风格
我们之前的提交方式为普通方式
<button @click=“addcount(5)”>+5
addcount(count){
this.$store.commit(‘addcount’,count)
},
这里传递过去的count就是一个数字5
而还有一种特殊的提交方式,便是提交一个对象过去
this.$store.commit({ //直接传一个对象,相当于传过去一个payload(荷载)
type:‘addcount’, //这里的type指的就是mutation名
count //count指的就是count:count,用了es6简写
})
此时我们的mutation接收到的patload便不再是一个5,而是我们传的这个数组,使用时便不再是直接使用,而是通过对象的.方式来使用
addcount(state,payload){
state.count += payload.count //这里通过.count的方法拿到payload中的count
},
当传的参数多的时候,用特殊提交方式会更简洁一点
八、vuex中state中的响应规则
只有在store中初始化好的state中的数据,才有响应式的特性
九、vuex中的actions
在vuex中,只能通过mutation修改state,而mutation中执行的是同步操作,如果在mutation中执行异步操作,那么在devtools中会追踪不到数据的变化,所以,当执行异步操作时,我们要在actions中进行,而Actions便是专门用于执行异步操作
actions:{ //用于处理异步操作
aupdate(context){ //当我们要使用actions时,一样在actions定义一个方法,和mutations不同的是,mutations中的
//默认参数是state,而actions的默认参数是context(上下文),在这里,context指的是store实例
setTimeout(() => {
context.commit(‘updatainfo’) //在异步操作中通过commit执行mutation,相当于饶了一步执行
}, 1000);
}
},
我们在使用mutation时,是通过this.$store.commit()方法使用,而我们在组件中使用action时,需要通过一个新的方法 dispatch来使用action
{{ $store.state.info }}
updatainfo(){
this.$store.dispatch(‘aupdate’)
}
而action传参也是和mutation一样
actions:{ //用于处理异步操作
aupdate(context,payload){ //参数使用和mutation一样
setTimeout(() => {
context.commit(‘updatainfo’, payload)
}, 1000);
}
},
十、vuex中的modules
modules:{ //modules,模块,在vuex中,由于单一状态树的限制,我们只能创建一个store,所以也只有一个state,但是如果所有数据都放在state中,那么代码数据将会显得很臃肿,所以我们需要使用modules来分担一些数据
a:{ //我们创建一个叫做a的模块,模块中和store中一样,也有基本的要素
state:{
name:“zhangsan”, //在模块中定义的state,最后将会以一个对象的方式加入到store中的state,所以在使用的时候,
//我们需要这么用:this.$state.a.name 来使用
},
mutations:{
updataName(state,payload){ //modules中的mutations,用起来和store中的用法是一样的,都是通过commit提交,
//this.$store.commit(‘updataName’),系统会先去store里面看有没有这个mutation,没找到便会
//来modules中来找,传参的方式也是一样,会默认传一个state,第二个是自己传的参数
return state.name = payload
}
},
actions:{ //也是默认传一个context,只不过这里的context指的不是store,而是模块本身
anyscupdata(context){ //在使用时通过this.$store.dispatch()使用
setTimeout(() => {
context.commit(‘updataName’,‘wangwu’)
}, 1000);
}
},
getters:{ //modules中的getters和store中的一样,也是通过$store.getters.名字使用
updataName2(state){ //也是默认传入state
return state.name + ‘11111’
},
updataName3(state,getters){ //也可以把getters当成参数,获取到其他getter
return getters.updataName2 + ‘22222’
},
updataName4(state,getters,rootState){ //还可以获取到store中的state,通过rootState
return getters.updataName3 + rootState.count
}
},
}
}
十一、vuex的目录结构化
将store中的每个核心抽离成单独的模块,再通过import导入,这样整个代码就显得十分简洁
import Vue from ‘vue’
import Vuex from ‘vuex’
//通过import导入
import mutations from ‘./mutations’
import actions from ‘./actions’
import getters from ‘./getters’
import moduleA from ‘./modules/moduleA’
Vue.use(Vuex)
const state = {
//用于存放状态
count: 1000,
student: [
{ id: 100, name: “naruto”, age: 18 },
{ id: 101, name: “sasiki”, age: 14 },
{ id: 102, name: “sora”, age: 25 },
{ id: 103, name: “siro”, age: 27 },
],
info: {
id: 105, name: “kobe”, age: 30
}
}
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
modules: { //modules,模块,在vuex中,由于单一状态树的限时,我们只能创建一个store,所以也只有一个state,但是如果
//所有数据都放在state中,那么代码数据将会显得很臃肿,所以我们需要使用modules来分担一些数据
a: moduleA
}
})
export default store
十二、辅助函数的使用
mapGetter/mapActions
可以直接把getters或者actions里面的东西映射到要用的地方
在要用的组件中的methods或者computed中,直接使用
. . .mapAction( [ ‘ 要用的方法名 ’ ] )
就可以了
之前要使用actions都是要用dispatch进行使用的
This.$store.dispatch(‘方法名’,参数)
使用了辅助函数之后就可以直接
This.方法名(参数)
= new Vuex.Store({
state,
mutations,
actions,
getters,
modules: { //modules,模块,在vuex中,由于单一状态树的限时,我们只能创建一个store,所以也只有一个state,但是如果
//所有数据都放在state中,那么代码数据将会显得很臃肿,所以我们需要使用modules来分担一些数据
a: moduleA
}
})
export default store
[外链图片转存中…(img-9eXGyly2-1570697067661)]
十二、辅助函数的使用
mapGetter/mapActions
可以直接把getters或者actions里面的东西映射到要用的地方
在要用的组件中的methods或者computed中,直接使用
. . .mapAction( [ ‘ 要用的方法名 ’ ] )
就可以了
之前要使用actions都是要用dispatch进行使用的
This.$store.dispatch(‘方法名’,参数)
使用了辅助函数之后就可以直接
This.方法名(参数)
这样写的效果和上面用dispatch是一样的
vuex的知识点笔记相关推荐
- Vue 2.x 常用知识点笔记(万字笔记)
Vue 2.x 笔记 常用知识点笔记,有错误欢迎指点哦~ 字数超过了一万字,得细品 目录 Vue 2.x 笔记 1.新建Vue实例 2.阻止生成生产提示 3.模板语法 3.1 插值语法 3.2 指令语 ...
- Python中知识点笔记
Python中知识点笔记 Wentao Sun. Nov.14, 2008 来这个公司11个月了,最开始来的一个笔记本用完了,里面都是工作时记录的一些片段,看到一块自己当时学/写 python程序时记 ...
- [新手必备]Python 基础入门必学知识点笔记
Python 作为近几年越来越流行的语言,吸引了大量的学员开始学习,为了方便新手小白在学习过程中,更加快捷方便的查漏补缺.根据网上各种乱七八糟的资料以及实验楼的 Python 基础内容整理了一份极度适 ...
- Vue学习(vuex)-学习笔记
文章目录 Vue学习(vuex)-学习笔记 含义理解 具体代码 辅助函数 mapGetters mapActions Vue学习(vuex)-学习笔记 含义理解 State Vuex 使用单一状态树- ...
- 2010计算机知识点总结,2010年全国职称计算机考试:知识点笔记第一章
第一章 信息技术与计算机文化 1. 信息技术与计算机 1) 信息技术的概念:利用科学的原理.方法及先进的工具和手段,有效地开发和利用信息资源的技术体系.包括微电子技术.计算机技术.软件技术.通信技术等 ...
- 【软考-软件设计师精华知识点笔记】第八章 算法分析设计
前言 由于笔记复制到CSDN样式失效,没有精力再重新完整的检查并设置一遍样式,有积分的可以前往下载word.pdf.有道云笔记版本. 需要说明的是,下载的内容与本篇分享内容一致,只有样式的区别[比如重 ...
- 【软考-软件设计师精华知识点笔记】第十章 网络与信息安全
前言 由于笔记复制到CSDN样式失效,没有精力再重新完整的检查并设置一遍样式,有积分的可以前往下载word.pdf.有道云笔记版本. 需要说明的是,下载的内容与本篇分享内容一致,只有样式的区别[比如重 ...
- 2022疫情缩水,啃透这份399页Java架构知识点笔记,已从13K涨到25K
本来已经在为去大厂工作摩拳擦掌的Java朋友,社招又是需要5年以上的,今年显得格外艰难: 就业人数高达874万!人才竞争加剧! 疫情让大多数公司的招聘需求缩减!对社招来说,人才招聘要求愈来愈高! 别说 ...
- 软考知识点笔记之----制订项目管理计划
软考知识点笔记之----制订项目管理计划 项目管理计划是综合性的计划,是整合一系列分项的管理计划和其他内容的结果用于指导项目的执行.监控和收尾工作,项目管理计划是在项目管理其他规划过程的成果基础上制订 ...
- Unity3D相关知识点笔记汇总
这篇文章将作为一些平时的小知识点笔记来记录,如果有错误望指出来,也欢迎大家在评论底下分享你们的笔记. 1.检测点击或者触摸到UI. public static bool CheckClickUI(){ ...
最新文章
- Python 程序如何高效地调试?
- 基于 Lucene 的桌面文件搜索
- Linux编辑器vi使用方法详细介绍
- VMware16教程:配置同一局域网内的主机能够访问其他主机中的虚拟机(以squid代理上网服务为例)
- Applese 涂颜色
- 一流企业都在做数据治理,还用百万年薪招人,想做的无非这10点
- ZEROC究竟是何方神圣? Leader-us 大神来的回答 Leader-us mycat的发起者
- 中软国际软件测试培训中心,中软国际准员工培养计划C++开发/软件测试方向开班典礼...
- TAOUP初译稿_HOOK
- 密码技术---密钥和SSL/TLS
- vdagent与vdserver
- 我做了一个网易云音乐外链播放器的Vue组件,很nice
- 机器学习-*-K均值聚类及代码实现
- 百度接口根据关键字生成文章
- 关于奋斗的150条中国名人名言
- 一只青蛙一次可以跳一级或二级台阶,请问跳n级台阶有多少次跳法之斐波那契数列的非递归写法
- 2019年昆明理工大学计算机设计大赛,昆明理工大学计算中心网站
- 微型计算机原理怎么编程,微机原理实验一编程实现键盘输入和显示
- 什么是repair?什么是soft repair、hard repair、lane repair?
- 蓝桥杯比赛java试题及答案,2011蓝桥杯高职java试题及部分参考答案
热门文章
- 定时器加状态转移图方式实现DS18B20
- 服务器ipsan虚拟化,挂载IPSAN存储+链接克隆模板(修正版)
- MQL5 COOKBOOK: 获取仓位属性
- 答案--Java面试笔试题(3年以上)
- 基于OMAP-L138 DSP+ARM处理器与FPGA实现SDR软件无线电系统
- 华为以“平台应变”之道角逐数字化转型“深水区”
- Python 函数的嵌套
- 量子场论考试题目解答
- JixiPix Premium Pack for Mac(创意照片特效软件)
- 【产业互联网周报】Azure云服务业务收入明年超Office;三星计划2021年芯片资本支出35万亿韩元;余承东挂帅华为云...