今天是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
