VUE第十八天-阿里云开发者社区

今天是2022年7月9日,是我学习vue的第十八天

getters的使用

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
在store.js中追加getters配置

......
const getters = {
  bigSum(state){
    return state.sum * 10
  }
}
//创建并暴露store
export default new Vuex.Store({
  ......
  getters
})

组件中读取数据：$store.getters.bigSum

四个map方法的使用

mapState方法：用于帮助我们映射state中的数据为计算属性

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),
    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确。
修改store.js

const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}
const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}
const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

Count.vue

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h3>当前求和放大10倍为:{{ bigSum }}</h3>
    <h3>我在{{ school }},学习{{ subject }}</h3>
    <h3 style="color: red">Person组件的总人数是{{ personList.length }}</h3>
    <!-- 不写.number的话是字符2 字符3 或者在下面写:value -->
    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">当前求和为奇数再加</button>
    <button @click="incrementWait(num)">等一等再加</button>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "Count",
  // props: [""],
  data() {
    return {
      num: 1, //用户选择的数据
    };
  },
  computed: {
    //靠程序员自己亲自去写计算属性
    // sum() {
    //   return this.$store.state.sum;
    // },
    // school() {
    //   return this.$store.state.school;
    // },
    // subject() {
    //   return this.$store.state.subject;
    // },
    //第一个sum指计算属性的名字，第二个指state里的sum
    //借助mapState生成计算属性，从state中读取数据（对象写法）
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    //借助mapState生成计算属性，从state中读取数据（数组写法）
    ...mapState("countAbout", ["sum", "school", "subject"]),
    ...mapState("personAbout", ["personList"]),
    // ...mapState(["countAbout", "personAbout"]),
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },
    //借助mapGetters生成计算属性，从getters中读取数据（对象写法）
    // ...mapGetters({bigSum:'bigSum'}),
    //借助mapGetters生成计算属性，从getters中读取数据（数组写法）
    ...mapGetters("countAbout", ["bigSum"]),
  },
  methods: {
    //程序员亲自写方法
    // increment() {
    //   this.$store.commit("JIA", this.num);
    // },
    // decrement() {
    //   this.$store.commit("JIAN", this.num);
    // },
    //借助mapMutations生成对应的方法，方法会调用commit去练习mutations（对象写法）
    ...mapMutations("countAbout", { increment: "JIA", decrement: "JIAN" }),
    //借助mapMutations生成对应的方法，方法会调用commit去练习mutations（数组写法）
    // ...mapMutations(["JIA", "JIAN"]),
    // ************************************
    //程序员亲自写方法
    // incrementOdd() {
    //   this.$store.dispatch("jiaOdd", this.num);
    // },
    // incrementWait() {
    //   this.$store.dispatch("jiaWait", this.num);
    // },
    //借助mapActions生成对应的方法，方法会调用dispatch去练习actions（对象写法）
    ...mapActions("countAbout", {
      incrementOdd: "jiaOdd",
      incrementWait: "jiaWait",
    }),
    //借助mapActions生成对应的方法，方法会调用dispatch去练习actions（数组写法）
    // ...mapActions(["jiaOdd", "jiaWait"]),
  },
  mounted() {
    const x = mapState({ sum: "sum", school: "school", subject: "subject" });
    console.log(x);
  },
};
</script>
<style>
button {
  margin-left: 5px;
}
</style>

Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">Count组件求和为：{{ sum }}</h3>
    <h3>列表中第一个人的名字是：{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList;
    },
    sum() {
      return this.$store.state.sum;
    },
    firstPersonName() {
      return this.$store.getters["personAbout/firstPersonName"];
    },
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      //   console.log(personObj);
      this.$store.commit("personAbout/ADD_PERSON", personObj);
      this.name = "";
    },
    addWang() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.dispatch("personAbout/addPersonWang", personObj);
      this.name = "";
    },
    addPersonServer() {
      this.$store.dispatch("personAbout/addPersonServer");
    },
  },
};
</script>
<style>
</style>

App.vue

<template>
  <div>
    <Count></Count>
    <hr />
    <Person></Person>
  </div>
</template>
<script>
import Count from "./components/Count.vue";
import Person from "./components/Person.vue";
export default {
  name: "App",
  components: {
    Count,
    Person,
  },
};
</script>
<style scoped>
</style>

count.js

//求和相关的配置
const countOptions = {
    //开启命名空间
    namespaced: true,
    actions: {
        jiaOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500)
        },
    },
    mutations: {
        JIA(state, value) {
            // console.log('mutations中的JIA被调用了', state, value);
            state.sum += value
        },
        JIAN(state, value) {
            // console.log('mutations中的JIAN被调用了', state, value);
            state.sum -= value
        },
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    },
    state: {
        sum: 0,//当前的和
        school: 'cuit',
        subject: '前端',
    }
}
export default countOptions

person.js

//人员管理相关的配置
import axios from 'axios'
import nanoid from 'nanoid'
const personOptions = {
    //开启命名空间
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            } else {
                alert('添加的人必须姓王！')
            }
        },
        addPersonServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了');
            state.personList.unshift(value)
        }
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    },
    state: {
        personList: [
            { id: '001', name: '刘波' }
        ]
    }
}
export default personOptions

index.js

//该文件用于创建vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
// const actions = {
//直接在Count中进行数据处理
// jia(context, value) {
//     // console.log('actions中的jia被调用了');
//     context.commit('JIA', value)
// },
// jian(context, value) {
//     // console.log('actions中的jian被调用了');
//     context.commit('JIAN', value)
// },
// }
//准备mutations——用于操作数据(state)
// const mutations = {
// }
//准备getters——用于将state中的数据进行加工
// const getters = {
// }
//准备state——用于存储数据
// const state = {
// }
//创建store
const store = new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})
//暴露(导出)store
export default store

VUE第十八天

getters的使用

四个map方法的使用

模块化+命名空间

热门文章

最新文章

相关课程

相关电子书