Vue组件开发之Vuex详细使用

2023-01-28 0 564

Vuex的state

State 提供更多惟一公共统计数据源,大部份共享资源统计数据都要标准化放在store的state中储存

const store = new Vuex.Store({ State: {count: 0} }) 模块出访state的第二种形式this.$store.state.count 模块出访state的第三种形式 从vuex中按需引入mapState表达式 import{ mapState }from ‘vuex’ 透过这边引入的mapState表达式,将现阶段模块须要的自上而下统计数据,态射为computed特性 computed: { …mapState([‘count’]) }

Vuex的mutation

Mutation 用作更改store中的统计数据,不能在其它模块间接操作形式store中统计数据

const store = newVuex.Store({ state: { count:0 }, mutations: { //更改统计数据的操作形式,操作形式state中统计数据 //阿提斯鲁夫尔谷表达式} }) 促发mutation,在模块中初始化 methods: { 表达式名(){this.$store.commit(‘mutation的阿提斯鲁夫尔谷表达式名’) //commit()初始化mutation模块 } }

在表述mutation是能传达模块

mutations: { addN(state,step) { //表述addN表达式,state是预设模块,step自表述模块state.count += step } }//模块初始化mutations表达式 methods: { handle2(){ this.$store.commit(‘addN’,3) //3是传至的step的前述模块 } }

出访mutations的第三种方式

从vuex中按需引入mapMutations表达式 import { mapState,mapMutations } from‘vuex’ 将指定的mutations表达式,态射为现阶段模块的methods表达式 methods: { … mapMutations ([‘add’, ‘addN’]) //表达式方式 this.add() this.addN() }

vuex的action

action用作处理异步任务

如果透过异步操作形式更改统计数据,必须透过action,而不能采用mutation,但是在action中还是要透过促发mutation的形式间接更改统计数据

const store = new Vuex.Store({ state: {count: 0 }, mutations: { addN(state,step) { state.count +=step } },actions: { addNAsync(context,step) { setTimeout(() =>{ context.commit(‘addN’, step) }) } } }) 促发action,在模块中初始化methods: { handle(){ this.$store.dispatch(‘addNAsync’,5) //dispatch()初始化异步操作形式表达式 } } 模块初始化action的第三种形式 import{ mapState,mapMutations,mapActions}from ‘vuex’ //按需引入mapActions methods: { … mapActions ([‘addNAsync’]) //初始化 this. addNAsync() }

vuex的getter

getter用作对store中的统计数据进行加工处理形成新的统计数据

getter对源统计数据加工处理,类似vue的计算特性store统计数据发生变化,getter统计数据也会发生变化const store = new Vuex.Store({ state: { count: 0 }, getters: { showNum: state => { return ‘现阶段最新统计数据量是【‘+state.count+’】’ } } })

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务