vuex的map函数

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

一。引入map函数

  import {mapState,mapMutations,mapGetters,mapActions} from "vuex"

1.mapGetters

             computed: {
// fullname() {
//   return this.$store.getters.fullname;
// },
// firstname() {
//   return this.$store.getters.firstname;
// },
// lastname() {
//   return this.$store.getters.lastname;
// },

// 通过mapGetters函数，返回getters里面的数据(对象写法)
// ...mapGetters({fullname:"fullname",firstname:"firstname",lastname:"lastname"})
// 通过mapGetters函数，返回getters里面的数据(数组写法,getters里的函数名要一致)
...mapGetters(["fullname", "firstname", "lastname"]),
  },

2.mapActions

                   // del(no) {
//   this.$store.dispatch("del", no);
// },

// 借用mapActions生成对应方法，方法会调用dispatch去联系actions（对象写法）
// ...mapActions({del:"del"})

// 借用mapActions生成对应方法，方法会调用dispatch去联系actions（数组写法）
...mapActions(["del"]),

3.mapState

              // fulln() {
//   return this.$store.state.fulln
// },
// firstn() {
//   return this.$store.state.first;
// },
// lastname() {
//   return this.$store.state.lastn
// },

// 借助mapState生成计算属性，从state中获取数据(对象写法)
// ...mapState({ fulln: "fulln", firstn: "firstn", lastn: "lastn" }),

// 借助mapState生成计算属性，从state中获取数据(数组写法)
...mapState(["fulln", "firstn", "lastn"]),

4.Mutations

         <p>
  <button @click="updatex('王')">修改姓</button>
</p>
<p>
  <button @click="updatem('龙')">修改名</button>
</p>

           methods: {
// // 修改性
// updatex() {
//   this.$store.commit("updatex", this.x);
// },
// // 修改名
// updatem() {
//   this.$store.commit("updatem", this.m);
// },

// 借用Mutations生成对应方法，方法会调用commit去联系mutations（对象写法）
// ...mapMutations({ updatex: "updatex", updatem: "updatem" }),

// 借用Mutations生成对应方法，方法会调用commit去联系mutations（数组写法）
...mapMutations(["updatex", "updatem"]),
 },
 
 
   add(state, val) {
  state.list.unshift(val);
},

二.模块化

1.mapState

             // state
// fullname() {
//   return this.$store.person.firstn + "." + this.$store.person.lastn;
// },
// firstname() {
//   return this.$store.person.firstn;
// },
// lastname() {
//   return this.$store.person.lastn;
// },

// ...mapState("person",{firstn:"firstn ",lastn:"lastn"}),

 ...mapState("person",["firstn","lastn"]),
 
 
 

2.mapGetters

             // 调用getters
// fullname() {
//   return this.$store.getters['person/fullname'];
// },
// firstname() {
//   return this.$store.getters['person/fitstname'];
// },
// lastname() {
//   return this.$store.getters['person/lastname'];
// },

// 通过mapGetters函数，返回getters里面的数据(对象写法)
...mapGetters("person",{fullname:"fullname",firstname:"firstname",lastname:"lastname"})
// 通过mapGetters函数，返回getters里面的数据(数组写法,getters里的函数名要一致)
// ...mapGetters("person", ["fullname", "firstname", "lastname"]),

3.mapActions

              // 修改性
// updatex() {
//   this.$store.dispatch("person/updatex", this.x);
// },
// // 修改名
// updatem() {
//   this.$store.dispatch("person/updatem", this.m);
// },

// 借用Mutations生成对应方法，方法会调用commit去联系mutations（对象写法）
// ...mapActions("person",{ updatex: "updatex", updatem: "updatem" }),

// 借用Mutations生成对应方法，方法会调用commit去联系mutations（数组写法）
...mapActions("person",["updatex", "updatem"]),

4.mapMutations

                 // 修改性
// updatex() {
//   this.$store.commit("person/updatex", this.x);
// },
// // 修改名
// updatem() {
//   this.$store.commit("person/updatem", this.m);
// },

// 借用Mutations生成对应方法，方法会调用commit去联系mutations（对象写法）
// ...mapMutations("person",{ updatex: "updatex", updatem: "updatem" }),

// 借用Mutations生成对应方法，方法会调用commit去联系mutations（数组写法）
...mapMutations("person",["updatex", "updatem"]),