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是
   }
}

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 bew 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

标签：vuex,sum,add,actions,学习,mapState,state,Vuex
来源： https://www.cnblogs.com/lht1132950411/p/16372294.html