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>