Vue40-Vuex
Vue40-Vuex
文章目录
- Vue40-Vuex
- 一、概念
- 二、何时使用?
- 三、搭建vuex环境
- 四、基本使用
- 五、getters的使用
- 六、四个map方法的使用
- 七、模块化+命名空间
一、概念
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idAiJkri-1653963822140)(C:\Users\LiuJiaduo\AppData\Roaming\Typora\typora-user-images\image-20220521145351909.png)]
二、何时使用?
多个组件需要共享数据时
三、搭建vuex环境
注意vue2中要执行npm i vuex@3进行安装
创建文件:
src/store/index.js
//引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex)//准备actions对象——响应组件中用户的动作 const actions = {} //准备mutations对象——修改state中的数据 const mutations = {} //准备state对象——保存具体的数据 const state = {}//创建并暴露store export default new Vuex.Store({actions,mutations,state })
在
main.js
中创建vm时传入store
配置项...... //引入store import store from './store' ......//创建vm new Vue({el:'#app',render: h => h(App),store })
四、基本使用
初始化数据、配置
actions
、配置mutations
,操作文件store.js
//引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //引用Vuex Vue.use(Vuex)const actions = {//响应组件中加的动作jia(context,value){// console.log('actions中的jia被调用了',miniStore,value)context.commit('JIA',value)}, }const mutations = {//执行加JIA(state,value){// console.log('mutations中的JIA被调用了',state,value)state.sum += value} }//初始化数据 const state = {sum:0 }//创建并暴露store export default new Vuex.Store({actions,mutations,state, })
组件中读取vuex中的数据:
$store.state.sum
组件中修改vuex中的数据:
$store.dispatch('action中的方法名',数据)
或$store.commit('mutations中的方法名',数据)
备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写
dispatch
,直接编写commit
五、getters的使用
概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
在
store.js
中追加getters
配置......const getters = {bigSum(state){return state.sum * 10} }//创建并暴露store export default new Vuex.Store({......getters })
组件中读取数据:
$store.getters.bigSum
六、四个map方法的使用
mapState方法:用于帮助我们映射
state
中的数据为计算属性computed: {//借助mapState生成计算属性:sum、school、subject(对象写法)...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性:sum、school、subject(数组写法)...mapState(['sum','school','subject']), },
mapGetters方法:用于帮助我们映射
getters
中的数据为计算属性computed: {//借助mapGetters生成计算属性:bigSum(对象写法)...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性:bigSum(数组写法)...mapGetters(['bigSum']) },
mapActions方法:用于帮助我们生成与
actions
对话的方法,即:包含$store.dispatch(xxx)
的函数methods:{//靠mapActions生成:incrementOdd、incrementWait(对象形式)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成:incrementOdd、incrementWait(数组形式)...mapActions(['jiaOdd','jiaWait']) }
mapMutations方法:用于帮助我们生成与
mutations
对话的方法,即:包含$store.commit(xxx)
的函数methods:{//靠mapActions生成:increment、decrement(对象形式)...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成:JIA、JIAN(对象形式)...mapMutations(['JIA','JIAN']), }
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
七、模块化+命名空间
目的:让代码更好维护,让多种数据分类更加明确。
修改
store.js
const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}} }const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... } }const store = new Vuex.Store({modules: {countAbout,personAbout} })
开启命名空间后,组件中读取state数据:
//方式一:自己直接读取 this.$store.state.personAbout.list //方式二:借助mapState读取: ...mapState('countAbout',['sum','school','subject']),
开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取 this.$store.getters['personAbout/firstPersonName'] //方式二:借助mapGetters读取: ...mapGetters('countAbout',['bigSum'])
开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二:借助mapActions: ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
开启命名空间后,组件中调用commit
//方式一:自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二:借助mapMutations: ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
Vue40-Vuex相关推荐
- 【实用】Angular中如何实现类似Vuex的全局变量状态变化功能?
什么是Vuex?只需三分钟!只需创建一个vuex.js文件,让你马上学会使用Vuex,尽管Vuex是个鸡肋!(扔掉store文件夹和里面的index.getters.actions.mutations ...
- 只需三分钟!只需创建一个vuex.js文件,让你马上学会使用Vuex,尽管Vuex是个鸡肋!(扔掉store文件夹和里面的index、getters、actions、mutations等js文件吧!)
前情提示:有一天,我要实现一个效果→点击某个按钮改变一个全局变量,并且要让绑定了该变量的所有位置异步渲染.我试过用一个全局的js文件存放该变量,该变量值虽然改变了,但是没有做到异步渲染.接着我用win ...
- vuex+vue-router拦截
干就完了 项目中经常遇到这样一个场景,用户信息或者进行增删改的一些模块,需要根据用户是否登录,进行路由拦截,直接上代码 在store文件夹下的store.js中存放一个默认登录状态 /** store ...
- mutations vuex 调用_Vuex源码学习(六)action和mutation如何被调用的(前置准备篇)...
前言 Vuex源码系列不知不觉已经到了第六篇.前置的五篇分别如下: 长篇连载:Vuex源码学习(一)功能梳理 长篇连载:Vuex源码学习(二)脉络梳理 作为一个Web前端,你知道Vuex的instal ...
- 在vue中使用vuex,修改state的值示例
1. 安装 vuex npm install vuex -S 2.在目录下创建store文件 3. 在store.js编辑一个修改state的方法 然后在mian.js中全局引入 最后在组件中使用 这 ...
- vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
- 基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
- 详解 Vue Vuex 实践
2019独角兽企业重金招聘Python工程师标准>>> 随着应用复杂度的增加,我们需要考虑如何进行应用的状态管理,将业务逻辑与界面交互相剥离,详细讨论参考笔者的2016-我的前端之路 ...
- vue总结 08状态管理vuex
状态管理 类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库 ...
- 使用vue2.0 vue-router vuex 模拟ios7操作
其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...
最新文章
- 归一化变换 Normalizing transformations
- mfc只有doc才能序列化吗_MFC序列化-IMPLEMENT_SERIAL(...)
- 2019年上半年收集到的人工智能机器学习方向干货文章
- 【杂谈】从学员到开发者,我在有三AI打怪升级
- 【数据竞赛】这篇文章送给想要学习特征交叉的朋友。
- 四则运算关于加括号的思路
- JavaScript --- 解析Cookie
- zynq文档阅读之EMIO和MIO的细微差别
- iOS开发_统计xcode代码行数
- PTA 7-2 统计素数并求和
- POI Excel合并 分页符的复制
- camera tuning名词缩写
- Hystrix解决雪崩问题
- inv如何用计算机计算,计算器INV是用那个键表示的
- Java连接MySQL8.0以上版本
- 《果然新鲜》电商项目(44)- 利用Logstash自动同步数据库内容到ES
- ViewBag的简单使用
- iframe嵌套百度地图
- 主观不可见 一个非常有创意的动作解谜Flash小游戏
- 【文本处理 词频统计】python 实现词频统计
热门文章
- JavaScript学习第十六天(键盘事件、表单事件、拖拽事件、框架事件、媒体事件)
- Eviews软件中不显示且不能输入数据
- Html+JS+Css 实现动物赛跑随机速度
- Dataguru北京线下聚会圆满成功
- ignore的音标_英语ignore的意思解释|读音发音|相关词语_英语词典_词林在线词典...
- 2、springboot-基础知识点
- ORA-01031 新建用户创建视图提示权限不足
- python如何遍历字典对象
- 【软考中级】多媒体应用设计师复习笔记第八章
- c语言break语句作用,解析c语言switch中break语句的具体作用