vuex modules获取state,vuex修改state的值
这篇文章主要介绍了状态管理获取状态对象中值的所有方法小结（模块中的状态),具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vuex获取状态对象中的值直接从商店实例取值使用地图状态取值的多种方法使用组件中的statevuex调用状态数据第一种第二种：利用计算属性第三种：mapstate数组第四种：mapState对象第五种：mapState对象解构追加变量
vuex获取state对象中的值
直接从store实例取值
//main.js中，把商店注册在根实例下，可使用这个stroe.state直接取值
导出默认值{
计算值：{
testNum() {
归还这个100美元商店。状态。testnum
}
}
};
使用mapState取值的多种方法
从" vuex "导入{ mapState }；导出默认值{
data() {
返回{本地号码：1 }；
},
计算值：{
.mapState({
//箭头函数使代码更简练
testNum1: state=state.testNum1，
//传字符参数testNum2 等价于state=state.testNum2
testNum2: testNum2 ，
//组件的局部变量与状态管理变量相加
testNum3(状态){
返回状态。testnum 1这个。本地号码；
}
}),
.mapState([
//映射this.testNum3为store.state.testNum3
testNum3
])
}
};
使用module中的state
从" vuex "导入{ mapState }；
导出默认值{
计算值：{
.mapState({
//箭头函数使代码更简练
testnum 1:state=state。模块a。测试编号1
}),
//第一个参数是命名空间命名空间，填上对应的组件名称即可
.mapState(moduleA ，{
testNum2: state=state.testNum2，
测试编号3:“测试编号3”
}),
.mapState(moduleA ，[
testNum4
])
}
};
vuex调用state数据
第一种
直接访问氕姓名：{{$store.state.msg}}/h1
第二种：利用计算属性
将想要用到的全局状态数据，防止到组件的计算内部使用，五型的内容将其获取和设置分开即可
氕姓名：{{msg}}/h1
氕年龄：{{age}}/h1
氕数字：{{num}}/h1
输入类型=text v-model=num
计算值：{
年龄：函数(){//消息也相同，就没写
归还这个store.state.age
},
数量：{
get:function(){
归还这个100美元商店。状态。num
},
set:function(num){ //数据双向绑定
这个store.commit(setNum ，Num)
}
}
},
第三种：mapstate 数组
氕姓名：{{msg}}/h1
氕年龄：{{age}}/h1
氕数字：{{num}}/h1
输入类型=text :值=num @input=changeVal
从" vuex"//导入{ mapState }需要引入地图状态
computed:mapState([age ， msg ， num])，
方法：{
changeVal(e){//设置值
归还这个store.commit(setNum ，e.target.value)
}
},
第四种：mapState 对象
氕姓名：{{msg}}/h1
氕年龄：{{age}}/h1
氕数字：{{num}}/h1
从" vuex"//导入{ mapState }需要引入地图状态
计算的：mapState({
消息："消息",
数字："数字",
//年龄：(state)=state.age，//不需要大括号的时候，就不需要用返回返回值
年龄：(state)={ return state.age}
})
第五种：mapState 对象 解构 追加变量
氕姓名：{{msg}}/h1
氕年龄：{{age}}/h1
氕数字：{{num}}/h1
从" vuex "导入{ mapState }
设objMapState=mapState({
消息："消息",
数字："数字",
//年龄：(state)=state.age
年龄：功能(状态){返回此。绿色状态。年龄}，
})
data() {
返回{
绿色："蓝色"
}
},
计算值：{
.映射状态(对象映射状态)
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。