vue-cli学习-State状态设置

State 设置

Vuex 是单一状态树，一个对象包含全部状态，每个应用仅一个 store 实例
现在，给 state 增加三个共享状态，并设置一个需要修改的数据

//store/index.js
export default new Vuex.Store({
  state: {
    count:0,
    name:'gui',
    age :100,
    gender:'男'
  },//状态值
  mutations: {
    increment(state){
      state.count++
    },
    setAge(state,value){
      state.age=value
    }
  },//修改状态
  actions: {
  },//接口异步请求，服务端请求数据
  modules: {
  }
})

//新建一个Person.vue并配置好路由规则
<template>
  <div class="person">
    <ur>
      <li>姓名：{{ name }}</li>
      <li>性别：{{ gender }}</li>
      <li>年龄：{{ age }}</li>
    </ur>
    <input type="text" @input="setAge" :value="age">{{test}}
  </div>
</template>

<script>
export default {
  name: "Person",

   computed: {
     name() {
       return this.$store.state.name
     },
     gender() {
       return this.$store.state.gender
     },
     age: {
       get() {
         return this.$store.state.age
       },
       set(value){
         this.$store.commit('setAge',value)
       }
     }
   }
}
</script>

<style scoped>

</style>

但是共享状态变多之后，重复代码量会增多；
在 Vuex 中提供了一个 mapState 辅组函数，我们可以使用它来简化操作；

<input type="text" @input="setAge" :value="age">

  //导出非默认的一个辅组函数，需要大括号，且名称固定
  import { mapState } from 'vuex
  computed:mapState(['name','gender',"age"]),

  ///v-model 因为丢失计算属性 set,get，改成事件
  methods: {
    setAge(e) {
      this.$store.commit('setAge', e.target.value)
    }
  }

如果状态名和模版插值名不一样，或者在插值显示的值还需要进一步处理的

computed: {
    test() {
      return 'test'
    },
    //对象展开运算符
    ...mapState({
      //箭头函数 state 是参数，状态对象，可改
      //第一个 name 是模版显示的插值
      //第二个 name 是状态对象的属性
      name: (state) => state.name,
      //简写版，同上 'gender'等于 state => state.gender
      gender: 'gender',
      age(state) {
        //return state.age + this.count
        return state.age
      }
    })
  },