您当前的位置:首页 > 电脑百科 > 程序开发 > 程序员

那些前端开发需要掌握的:Vuex基础使用方法

时间:2020-08-20 10:29:07  来源:  作者:

那些前端开发需要掌握的:Vuex基础使用方法

 

Vuex

概念

为Vue.js程序开发的一套状态管理器

State

项目的数据源,整个项目的状态都保存在state里面。

 state:{
     number:123,
     name:'bulang',
     sex:'boy',
     infos:[{
         name:'kaisa',
         sex:'boy'
      },{
         name:'jiecaowa',
         sex:'girl'
     }]
 },
复制代码

组件中获取state的方法:

  • this.$store.state.key
  • 使用辅助函数mapState()把state里面的值映射为组件的计算属性并展开,在组件的模板里面便可以直接使用: computed:{ ...mapState(['key']), } 复制代码

Mutation

提交mutation是唯一可以改变state的方法;

第一个参数为state,第二个参数为自定的参数payload;

使用同步方式操作state,否则由于异步数据无法追踪导致devtools记录的历史快照会出问题;

// 例:
mutations:{
    add:(state, payload)=>{
        state.number+=payload.gap;
    },
    reduce:(state, payload)=>{
        state.number-=payload.gap;
    }
}
复制代码

组件中提交mutation的方法:

  • this.$store.commit('add',{gap:5})
  • 使用辅助函数mapMutations()把对应的mutaions映射到组件的methods里面并展开,在组件的模板里面便可以直接使用: // 例 import { mapMutations } from 'vuex'; export default { name:"active", methods: { ...mapMutations(['add', 'reduce']) }, } 复制代码

Action

主要作用:执行异步操作(如:接口请求等)并提交mutaion;

  • 第一个参数为与Store实例一样具有相同方法的context对象,可以通过解构的方式获取对象上的方法;
  • 第二个参数为自定义传的值;
  • actions之间可以互相派发;
// 例:
actions:{
    toLog:({dispatch}, msg)=>{
        dispatch('promiseLog',msg).then(()=>{
            console.log('success');
        }).catch(()=>{
            console.log('error');
        })
    },
    promiseLog:({commit},msg)=>{
        return new Promise((resolve, reject)=>{
            const i = ~~(Math.random()*10);
            console.log(i)
            if(i<5){
                commit('log',msg)
                resolve();
            }else{
                reject();
            }
        });
    }
},
复制代码

在组件中派发actions的方法:

  • this.$store.dispatch('toLog','yes')
  • 使用辅助函数mapActions()把actions映射到组件的methods里面,然后在组件的模板里面直接调用 // 例: import { mapActions } from 'vuex'; export default { name:"active", methods: { ...mapActions(['toLog']) }, } 复制代码

Getter

主要作用:对state数据进行加工,用来派生新的状态

  • 第一个参数为state用来提供数据;
  • 第二个参数可以传入其他的getters,使用其他getter加工后的数据;
  • 可以在getter中返回一个函数,这样我们在使用的时候就可以传递参数,根据参数来决定返回的数据;
// 例:
getters:{
    getInfo:state=>{
        return `my name is ${state.name}, ${state.sex}`;
    },
    getCustomInfo:state => index => {
        return `my name is ${state.infos[index]['name']}, ${state.infos[index]['sex']}`;
    }
}
复制代码

在组件中使用getters

  • this.$store.getters.getInfo
  • 使用辅助函数mapGetters把getter映射到组件的computed里面,然后在组件模板中直接使用; // 例: import { mapGetters } from 'vuex' export default { name:'show', computed:{ ...mapGetters(['getInfo', 'getCustomInfo']) } } 复制代码

Module

当项目足够大的时候,所有的state,mutaions,actions,getters放到一个文件里面会非常难维护,所以我们需要把state,mutaions,actions,getters分别提出来放到各自的文件并导出。

  1. 每个模块里面有各自的state,mutaions,actions,getters文件;
  2. 每个模块有一个index.js文件统一导出所有方法;
  3. 导出模块时可以指定是否使用命名空间,这样可以在组件中指定对应的模块来执行对应的操作;
  4. 在store的入口文件导入所有模块儿;
  5. 实例化Store时在modules里面传入模块;
  6. 使用辅助函数时,如果声明了使用命名空间,可以给辅助函数的第一个参数传入指定模块;

 

 

 



Tags:Vuex基础使用方法   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Vuex概念为Vue.js程序开发的一套状态管理器State项目的数据源,整个项目的状态都保存在state里面。 state:{ number:123, name:&#39;bulang&#39;, sex:&#39;boy...【详细内容】
2020-08-20  Tags: Vuex基础使用方法  点击:(127)  评论:(0)  加入收藏
▌简易百科推荐
JAVA开发工程师(北京)本科 3-5年经验 面议 (招1人)岗位职责:1.负责我行应用系统的设计,完成软件编码工作,负责管理代码设计规范等工作;2.根据应用需求分析说明书,评估需求研发的可行...【详细内容】
2021-12-27  just do丶IT公众号    Tags:国企   点击:(1)  评论:(0)  加入收藏
今天聊聊编程的本质。程序就是数据结构+控制+逻辑,程序员编程工作的本质是翻译,翻译机要来了,程序员怎么办?黑客帝国中的程序黑客帝国4就要上映了,不知道前三部你看懂了么?值得多...【详细内容】
2021-12-17  博士聊IT    Tags:程序员   点击:(8)  评论:(0)  加入收藏
梦醒之后,每个人对于这份职业的未来、互联网行业的未来,以及更重要的,自己的未来都有了更现实的判断 文 | 祝颖丽编辑 | 黄俊杰一个生于 1986 年的人,他所走过的前半生:从出生起,...【详细内容】
2021-12-03    财经杂志  Tags:程序员   点击:(15)  评论:(0)  加入收藏
前些天在头条看到一个八二年的哥们,述说自己找工作屡次被拒的问题,在网上引起了广泛的讨论,这件事给我留下了很深的印象,因为这哥们和我同是程序员,都人到中年,上有老下有小。唯一...【详细内容】
2021-12-01  云南贤哥在深圳    Tags:程序员   点击:(20)  评论:(0)  加入收藏
很多读者都问过一个问题:程序员如何实现高速成长?之前也写过相关的文章,强调的主要是夯实计算机体系基础知识。 再说另一个诀窍:多看经典开源项目,这些项目大多是众多顶尖程序员...【详细内容】
2021-11-30  findyi    Tags:程序员   点击:(14)  评论:(0)  加入收藏
近日,一位45岁的网民在中国政府网留言求职,引发关注。该网民自称是一名软件开发人员,今年45岁,精通各种技术体系,“而我辞职回家半年后再回来寻找工作机会的时候,却发现连个面试...【详细内容】
2021-11-17  郭主任    Tags:程序员   点击:(42)  评论:(0)  加入收藏
即使在安全技术取得进步之后,网络犯罪仍在不断增加。据统计,网络犯罪每分钟给企业造成约 290 万美元的损失。主要是因为新技术不断涌现,难以维护安全。随着网络威胁的增加,网络...【详细内容】
2021-11-04  章大千    Tags:编程语言   点击:(40)  评论:(0)  加入收藏
北漂小伙李强(化名),在北京互联网大厂工作7年,月薪3万,离职回老家开摄影店,亏了200万。李强出生于山西一座名不经传的小城市,互联网专业大学毕业的他,没有听父母的劝言回到家乡考公...【详细内容】
2021-10-29  霸王课  今日头条  Tags:程序员   点击:(51)  评论:(0)  加入收藏
程序员是青春饭,这在国内似乎是公认的。所以很多公司不愿招大龄程序员,很多程序员也“知趣”地及早转型。有的做管理,有的做架构,我还见过改行卖保险的。总之,年龄大了不想敲代码...【详细内容】
2021-10-27  编程的艺术    Tags:   点击:(30)  评论:(0)  加入收藏
软件工程专业有Web开发、移动终端开发、大数据开发、计算机系统工程师、视频开发工程师、计算机软件应用工程师等就业方向。第一,Web开发。Web开发包括前端开发和后端开发。...【详细内容】
2021-10-19  辰新   企鹅号  Tags:软件工程   点击:(79)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条