那些前端开发需要掌握的: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是唯一可以改变state的方法;【那些前端开发需要掌握的:Vuex基础使用方法】第一个参数为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']) }, } 复制代码
主要作用:执行异步操作(如:接口请求等)并提交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']) }, } 复制代码
主要作用:对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']) } } 复制代码
- 每个模块里面有各自的state,mutaions,actions,getters文件;
- 每个模块有一个index.js文件统一导出所有方法;
- 导出模块时可以指定是否使用命名空间,这样可以在组件中指定对应的模块来执行对应的操作;
- 在store的入口文件导入所有模块儿;
- 实例化Store时在modules里面传入模块;
- 使用辅助函数时,如果声明了使用命名空间,可以给辅助函数的第一个参数传入指定模块;
推荐阅读
- Keepfast v0.6.2 发布,前端性能分析工具
- 正规APP开发公司的软件开发流程是怎样的?
- 10大高性能开发宝石,我要消灭一半程序员
- 关于Spring IoC的那些事
- Winform界面开发中的困境及解决方案
- IDE 最佳Android应用程序开发工具
- 服用一次紧急避孕药有那些危害
- 这4个简化流程是APP快速开发方式之一
- 现代Web开发中的JavaScript音频库——howler.js
- 开发百年老茶树,陈升号四大名山易武