vuex state状态设置
如果设置了大量的state属性值,那么在调用时会比较麻烦
在vuex中提供了一个mapState辅助函数,使用它简化操作
简单例子:
定义数据
通过mapState函数获取数据
<template>
<div class="person">
<ul>
<li>姓名 : {{name}}</li>
<li>性别 : {{gender}}</li>
<li>年龄 : {{age}}</li>
</ul>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: "Person",
//数组方法
computed : mapState(['name','gender','age'])
}
</script>
<style scoped>
</style>
修改数据
无法使用v-model绑定数据修改,使用事件
在index.js写好函数
//理解为方法区
mutations: {
fun(state){
state.count++
},
setAge(state,value){
this.state.age=value
}
},
person.vue
<template>
<div class="person">
<ul>
<li>姓名 : {{name}}</li>
<li>性别 : {{gender}}</li>
<li>年龄 : {{age}}</li>
<input type="text" @input="setAge" :value="age">
</ul>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: "Person",
//数组方法
computed : mapState(['name','gender','age']),
methods:{
setAge(e){
this.$store.commit('setAge',e.target.value)
}
}
}
</script>
<style scoped>
</style>