• 《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapState与mapGetters

    在这里插入图片描述

    文章目录

    效果展示：

    在这里插入图片描述
    注意点1：

    问题：如何实现“当前和为奇数再加”？

    答案：

    incrementOdd(){
	if(this.sum % 2){
		this.sum += this.n
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5

    注意点2:

    问题：select下拉框默认为1时，点击加号没问题，但是下拉框选中为2时，n值变成字符串了，不应该是数字类型名吗？

    旧代码：无论设置 value="1"还是 value=1都无效

    <h1>当前求和为：{{sum}}</h1>
<select v-model="n">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    答案：因为没设置值选中值为数值类型

    方式1，使用v-bind

    <h1>当前求和为：{{sum}}</h1>
<select v-model="n">
	<option :value="1">1</option>
	<option :value="2">2</option>
	<option :value="3">3</option>
</select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    方式2，v-model设置修饰符

    <h1>当前求和为：{{sum}}</h1>
<select v-model.number="n">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    9.4求和案例_mapState与mapGetters

    在这里插入图片描述
    在这里插入图片描述

    改动地方：

    Count.vue

    <h3>我在{{school}}，学习{{subject}}</h3>

import {mapState,mapGetters} from 'vuex'

computed:{
    //靠程序员自己亲自去写计算属性
    /* sum(){
      return this.$store.state.sum
    },
    school(){
      return this.$store.state.school
    },
    subject(){
      return this.$store.state.subject
    }, */

    //借助mapState生成计算属性，从state中读取数据。（对象写法）
    // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

    //借助mapState生成计算属性，从state中读取数据。（数组写法）
    ...mapState(['sum','school','subject']),

    /* ******************************************************************** */

    /* bigSum(){
      return this.$store.getters.bigSum
    }, */

    //借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
    // ...mapGetters({bigSum:'bigSum'})

    //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    ...mapGetters(['bigSum'])
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    index.js

    //准备state——用于存储数据
const state = {
    sum:0, //当前的和
    school:'尚硅谷',
    subject:'前端'
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    完整代码

    main.js

    //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    App.vue

    <template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    Count.vue

    <template>
  <div>
    <h1>当前求和为：{{sum}}</h1>
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{school}}，学习{{subject}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  name:'Count',
  data() {
    return {
      n:1, //用户选择的数字
    }
  },
  computed:{
    //靠程序员自己亲自去写计算属性
    /* sum(){
      return this.$store.state.sum
    },
    school(){
      return this.$store.state.school
    },
    subject(){
      return this.$store.state.subject
    }, */

    //借助mapState生成计算属性，从state中读取数据。（对象写法）
    // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

    //借助mapState生成计算属性，从state中读取数据。（数组写法）
    ...mapState(['sum','school','subject']),

    /* ******************************************************************** */

    /* bigSum(){
      return this.$store.getters.bigSum
    }, */

    //借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
    // ...mapGetters({bigSum:'bigSum'})

    //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    ...mapGetters(['bigSum'])

  },
  methods: {
    increment(){
      this.$store.commit('JIA',this.n)
    },
    decrement(){
      this.$store.commit('JIAN',this.n)
    },
    incrementOdd(){
      this.$store.dispatch('jiaOdd',this.n)
    },
    incrementWait(){
      this.$store.dispatch('jiaWait',this.n)
    },
  },
  mounted() {
    const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
    console.log(x)
  },
}
</script>

<style lang="css">
button{
  margin-left: 5px;
}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    Index.js

    //该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
    /* jia(context,value){
        console.log('actions中的jia被调用了')
        context.commit('JIA',value)
    },
    jian(context,value){
        console.log('actions中的jian被调用了')
        context.commit('JIAN',value)
    }, */
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了')
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了')
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state,value){
        console.log('mutations中的JIA被调用了')
        state.sum += value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用了')
        state.sum -= value
    }
}
//准备state——用于存储数据
const state = {
    sum:0, //当前的和
    school:'尚硅谷',
    subject:'前端'
}
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    结果展示

    在这里插入图片描述

    本人其他相关文章链接

    1.《进阶篇第9章》学习vuex知识点后练习：求和案例_纯vue版代码
    2.《进阶篇第9章》学习vuex知识点后练习：把求和案例改成vuex版代码
    3.《进阶篇第9章》学习vuex知识点后练习：把求和案例改成getters
    4.《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapState与mapGetters
    5.《进阶篇第9章》学习vuex知识点后练习：把求和案例改成mapMutations与mapActions
    6.《进阶篇第9章》学习vuex知识点后练习：把求和案例改成多组件共享数据
    7.《进阶篇第9章》学习vuex知识点后练习：把求和案例改成vuex模块化编码

  • 相关阅读:
    NC52867 Highway （树的直径定理）
    kafka顺序读写磁盘分析
    机器学习(四)机器学习分类及场景应用
    用Python操作MySQL教程！干货满满！
    【架构视角】一篇文章带你彻底吃透Spring
    lstm时间序列 深度学习
    云上本地化运营，东非第一大电商平台Kilimall的出海经
    vue3+ts 实现移动端拖拽交换位置
    拓世大模型 | 立足行业所需，发力终端，缔造智能无限可能
    uni——判断option传参
  • 原文地址：https://blog.csdn.net/a924382407/article/details/125484796