Vuex学习

Vuex的五个属性值

1.state---存储的数据
2.mutation---公有方法  $commit触发
3.getter---存放操作state的数据的处理函数
4.action---异步提交mutation  $dispatch触发 
5.modules---vuex模块化
 --mapState 映射状态计算属性

actions异步

actions异步提交mutations
actions:{
   事件名(context,value){
       context的话就相当于state的父亲，上一级，包含着state中的所有属性
   }
}

context配置

context:{
state, // 等同于store.$state，若在模块中则为局部状态
rootState, //等同于store.$state,只存在模块中
commit, // 等同于store.$commit
dispatch, // 等同于store.$dispatch
getters // 等同于store.$getters
}

modules模块化

vuex分配不同人员配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const userOptions={
    state:{
        a:100
    },
    actions:{},
    mutations:{},
	...
}
const adminOptions={
    namespaced:true,//开启命名空间，这个属性配置mapState等其他属性如何获取到相关vuex模块化的内容
    state:{
    	b:10
    },
    actions:{},
    mutations:{
      add(state,value){
            state.b++;
        }
    },
    ...
}
export default new Vuex.Store({
    modules:{
        USER:userOptions,
        ADMIN:adminOptions
    }
})    
// 
...mapState(USER,['b']) //USER,如果不设置namespaced,mapState找不到是哪个模块化的内容
//使用commit触发不同的模块化内容时
this.$store.commit("ADMIN/add",值) //这种写法为vuex配置设置

1.mapState和 mapGetters

vuex文件
state:{
    sum:0,
    add:1
}
getters:{
    sum:sum=>sum+10
}
vue组件文件
import {mapState,mapGetters} from 'vuex'
<template>
  <div>
    {{sum2}}
  </div>
</tempalte>
computed{
    //借助mapState生成计算属性，从state中读取数据（对象写法）
    ...mapState({sum2:'sum',add2:"add"})
    //借助mapState生成计算属性，从state中读取数据（数组写法）
    ...mapState(['sum','add'])
   //借助mapGetters生成计算属性 从getters中读取数据（写法同上）
}

2.mapMutations和mapActions

//借助mapGetters生成对应的方法，方法会调用commit方法去联系mutations