vuex

1.什么是vuex

专为Vue.js应用程序开发的状态管理模式。用来集中管理项目中的公共数据

2.vuex的5个要素

2.1 State

2.1.1 state的作用

保存公共数据,state是响应式的

2.1.2 定义数据

state:{
  //属性名：属性值
  name:'joker',
  company:'ATLUS'
  }

2.1.3 使用数据

this.$store.state.属性名 or {{$store.state.属性名}}

2.2 Mutations(变异)

2.2.1 mutations作用

调用mutations来修改定义在state的公共数据

2.2.2 注册格式

mutations:{
  mutation名:function(state[,参数]{
  }
}

第一个参数表示当前state，第二个参数可选，表示载荷(在执行函数时要传入的数据)

2.2.3 提交格式

this.$state.commit('mutation名',载荷)

2.2.4 注意

是Vuex中修改公共数据的唯一入口

2.3 Getters

2.3.1 getters作用

类似于computed

2.3.2 定义格式

getters名字:function(state){
  return 返回值
  }

2.3.3 使用格式

$store.getters.getter名字

2.4 Action

2.4.1 actions作用

发异步请求

2.4.2 定义格式

actions:{
  action名字:function(context,载荷){
  //发异步请求，请求数据
  //commit调用mutation来修改/保存数据
  context.commit('mutation名',载荷)
  }
}

context对象会自动传入

2.4.3 调用格式

this.$store.dispatch('action名',载荷)

2.4.4 ajax在actions中优点

1.代码得到进一步封装，将ajax和vuex绑定
2.逻辑更通顺

2.5 Modules

2.5.1 modules作用

拆分模板

2.5.2 格式

modules:{
  modules名:{
  namespace:true,
  state:{},
  ...
  }
}

2.5.3 拆分模板后怎么访问数据

访问state/getters

state {{$store.state.模块名.数据项名}}
getters {{$store.getters['模块名/getter名']}}

访问mutations/actions

//namespace=false
$store.commit('mutaions名')
namespace=true
$store.commit('模块名/mutation名')

2.5.4 结构优化

3 Vuex辅助函数map

3.1 State

computed:{
  //全局
  ...mapState('[xxx]') or ...mapState({'新名字':'xxx'})
  //modules
  ...mapState('模块名','[xxx]') 
  or ...mapState('模块名',{'新名字','xxx'})
  }

3.2 Mutaions

methods:{
  //全局
  ...mapMutations(['mutation名']) 
  or ...mapMutations({'新名字','mutation名'})
  //modules
  ...mapMutations('模块名',['mutation名'])
  or ...mapMutations('模块名',{'新名字','mutation名'})
  }

3.3 Getters

computed:{
  //全局
  ...mapGetters('[xxx]') or ...mapGetters({'新名字':'xxx'})
  //modules
  ...mapGetters('模块名','[xxx]') 
  or ...mapGetters('模块名',{'新名字','xxx'})
  }

3.4 Actions

methods:{
  //全局
  ...mapActions(['action名']) 
  or ...mapActions({'新名字','action名'})
  //modules
  ...mapActions('模块名',['action名'])
  or ...mapActions('模块名',{'新名字','action名'})
  }