vuex：

state（数据存放）

作为一名刚入职不久的小前端，接手的项目数据采用vuex进行全局数据管理，自学了下vuex的相关知识包括state、mutations、actions定义及传参方式。 tips：vuex适用于大型的项目集中数据管理，小型项目使用可能会影响性能。

组件访问state数据的方式(访问state中的count字段）：

1.this.$store .state.count

2.import {mapState} from 'vuex'

Computed:{

...mapState(['count'])

}//将全局数据映射为组件的计算属性

mutations（变更state中的数据）

1.只能通过mutations修改state中的数据

2.集中监控所有数据的变化

Mutations:{

add(state){

state.count ++

}

}

1）触发mutation的第一种方式利用commit：

Methods:{

add(){

this.$store.commit('add')

this.$store.commit('add',3)//传参数3

}

}

mutations传参数：

mutations：{

add(state,num){

state+=num

}

}

2）从vuex中导入mapMutations函数 //触发mutations中方法的第二种方式

import {mapMutations} from 'vuex'

Methods:{

...mapMutation(['add'])

add(){

this.sub(3)//传入参数3

}

}

actions//处理异步任务

异步操作变更state中的数据，必须使用actions

1)actions触发方式

//定义actions

Actions:{

//在actions中,不能直接修改state中的数据只能通过commit触发 mutation中的方法来完成数据修改。

change(context){

setTimeout(()=>{

context.commit('add')

},1000)

}

}

//触发actions

Methods:{

handle(){

this.$store.dispatch('change') //触发action第一种方式

}

}

2）第二种触发方式 导入mapActions

import {mapActions }from 'vuex'

Methods:{

...mapMutations(['change'])//将mutations中的方法映射到组件计算属性

...mapActions('change')//将actions中的异步方法映射到组件～

change(){

this.change(3)//直接调actions中的异步方法

}

}