标签：vuex sum add actions 学习 mapState state 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。