首页 > 其他分享 >Vue学习笔记60--mapState + mapGetters

Vue学习笔记60--mapState + mapGetters

时间：2024-03-26 11:23:53浏览次数：33  
标签：Vue -- sum value 60 state selectNo bigSum store

示例一：通过计算属性

src/store/index.js

 

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

/*  准备actions--用于相应组件中的动作
1.context--miniStore
2.actions：建议逻辑处理在该处处理
3.如果没有业务路基处理，可直接使用mutations中对应的方法
 */
const actions = {
  incrementOdd (context, value) {
    if (context.state.sum % 2) {
      context.commit('Increment', value)//等价于Increment
      // context.commit('IncrementOdd', value)//等价于Increment
    }
  },
  incrementWait (context, value) {
    setTimeout(() => {
      context.commit('Increment', value)//等价于 IncrementWait
      // context.commit('IncrementWait', value)//等价于Increment
    }, 1000);

  },
}

/* 准备 mutations
用于操作数据(state)  
不建议写业务逻辑 
*/
const mutations = {
  Increment (state, value) {
    state.sum += value
  },
  Decrement (state, value) {
    state.sum -= value
  },
  IncrementOdd (state, value) {
    state.sum += value
  },
  IncrementWait (state, value) {
    state.sum += value
  },
}

// 准备state--用于存储数据(state中存放的就是全局共享数据)
const state = {
  sum: 0,//当前的和
  school: '高新一中',
  subject: '语数外'

}

// 准备getters--用于将state中的数据进行加工
const getters = {
  bigSum (state) {
    return state.sum * 10
  }
}

//创建store
// const store = new Vuex.Store({

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

 

Count.vue

<template>
  <div>
    <h3>当前求和为：{{ totalSum }}</h3>
    <h3>当前求和*10为：{{ bigSum }}</h3>
    <h3>我在：{{ mySchool }}，学习:{{MySubject }}</h3>

    <!-- 以上写法加计算属性等价于《==》以下写法 -->

    <!-- <h3>当前求和为：{{ $store.state.sum }}</h3>
    <h3>当前求和*10为：{{ $store.getters.bigSum }}</h3>
    <h3>我在：{{ $store.state.school }}，学习:{{$store.state.subject }}</h3> -->

    <!-- <select v-model="selectNo">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>   
    等价于下面写法
   -->
    <select v-model.number="selectNo">
      <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 } from 'vuex'

export default {
  name: 'Count',
  data () {
    return {
      selectNo: 1,//当前选择的数字
    }
  },
  // 通过计算属性获取state数据
  computed: {
    totalSum () {
      return this.$store.state.sum
    },
    mySchool () {
      return this.$store.state.school
    },
    MySubject () {
      return this.$store.state.subject
    },


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

  },
  mounted () {
    console.log('count this==>', this)
    console.log('count this.$store==>', this.$store)
  },
  methods: {
    increment () {
      // this.$store.dispatch('increment', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Increment', this.selectNo)
    },
    decrement () {
      // this.$store.dispatch('decrement', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Decrement', this.selectNo)
    },
    incrementOdd () {
      this.$store.dispatch('incrementOdd', this.selectNo)
    },
    incrementWait () {
      this.$store.dispatch('incrementWait', this.selectNo)
    },
  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

 

 mapState

写法一：对象写法，借助mapState生成计算属性，从state中读取数据

示例一：

<template>
  <div>
    <h3>当前求和为：{{ totalSum }}</h3>
    <h3>当前求和*10为：{{ bigSum }}</h3>
    <h3>我在：{{ mySchool }}，学习:{{mySubject }}</h3>
    <!-- 以上写法加计算属性等价于《==》以下写法 -->

    <!-- <h3>当前求和为：{{ $store.state.sum }}</h3>
    <h3>当前求和*10为：{{ $store.getters.bigSum }}</h3>
    <h3>我在：{{ $store.state.school }}，学习:{{$store.state.subject }}</h3> -->

    <!-- <select v-model="selectNo">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>   
    等价于下面写法
   -->
    <select v-model.number="selectNo">
      <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 } from 'vuex'

export default {
  name: 'Count2',
  data () {
    return {
      selectNo: 1,//当前选择的数字
    }
  },
  // 通过计算属性获取state数据
  computed: {
    // totalSum () {
    //   return this.$store.state.sum
    // },
    // mySchool () {
    //   return this.$store.state.school
    // },
    // mySubject () {
    //   return this.$store.state.subject
    // },

    // totalSum ()、 mySchool ()、 mySubject () 等价于以下代码
    // 写法一：对象写法，借助mapState生成计算属性，从state中读取数据
    ...mapState({ totalSum: 'sum', mySchool: 'school', mySubject: 'subject' }),

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

  },
  mounted () {
    console.log('count this==>', this)
    console.log('count this.$store==>', this.$store)
  },
  methods: {
    increment () {
      // this.$store.dispatch('increment', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Increment', this.selectNo)
    },
    decrement () {
      // this.$store.dispatch('decrement', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Decrement', this.selectNo)
    },
    incrementOdd () {
      this.$store.dispatch('incrementOdd', this.selectNo)
    },
    incrementWait () {
      this.$store.dispatch('incrementWait', this.selectNo)
    },
  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

示例二：　　

// 写法二：数组写法，借助mapState生成计算属性，从state中读取数据     ...mapState(['sum', 'school', 'subject']), 注：属性名必须和state中数据的名称一致 
<template>
  <div>
    <h3>当前求和*10为：{{ bigSum }}</h3>
    <h3>当前求和为：{{ sum }}</h3>
    <h3>我在：{{ school }}，学习:{{subject }}</h3>
    <select v-model.number="selectNo">
      <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 } from 'vuex'

export default {
  name: 'Count3',
  data () {
    return {
      selectNo: 1,//当前选择的数字
    }
  },
  // 通过计算属性获取state数据
  computed: {
    // totalSum () {
    //   return this.$store.state.sum
    // },
    // mySchool () {
    //   return this.$store.state.school
    // },
    // mySubject () {
    //   return this.$store.state.subject
    // },

    // totalSum ()、 mySchool ()、 mySubject () 等价于以下代码
    // 写法一：对象写法，借助mapState生成计算属性，从state中读取数据
    // ...mapState({ totalSum: 'sum', mySchool: 'school', mySubject: 'subject' }),

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

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

  },
  mounted () {
    console.log('count this==>', this)
    console.log('count this.$store==>', this.$store)
  },
  methods: {
    increment () {
      // this.$store.dispatch('increment', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Increment', this.selectNo)
    },
    decrement () {
      // this.$store.dispatch('decrement', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Decrement', this.selectNo)
    },
    incrementOdd () {
      this.$store.dispatch('incrementOdd', this.selectNo)
    },
    incrementWait () {
      this.$store.dispatch('incrementWait', this.selectNo)
    },
  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

mapGetters(使用方式和mapState一致)

 

    // bigSum () {
    //   return this.$store.getters.bigSum
    // },
    // 等价于 
    // ...mapGetters(['bigSum']),//数组写法
    ...mapGetters({ bigSum: 'bigSum' }),//对象写法

mapState + mapGetters 完整示例代码

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false

// 引入vuex、store
// import Vuex from 'vuex'  // store/index.js
import store from './store'//默认引入index.js
// 使用插件
// Vue.use(Vuex) // store/index.js

// console.log('Vue.prototype==>', Vue.prototype)
// console.log('VueComponent.prototype.__proto__==>', Vue.prototype)

new Vue({
  render: h => h(App), store
  
}).$mount('#app')

App.vue

<template>
  <div class="app">
    <!-- <Count /> -->
    <!-- <Count2 /> -->
    <Count3 />
  </div>
</template>

<script>
// 引入组件
import Count from './components/Count.vue';
import Count2 from './components/Count2.vue';
import Count3 from './components/Count3.vue';
export default {
  name: 'App',
  components: { Count, Count2, Count3 },


}
</script>

<style scoped>
</style>

src/store/index.js

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

/*  准备actions--用于相应组件中的动作
1.context--miniStore
2.actions：建议逻辑处理在该处处理
3.如果没有业务路基处理，可直接使用mutations中对应的方法
 */
const actions = {
  incrementOdd (context, value) {
    if (context.state.sum % 2) {
      context.commit('Increment', value)//等价于Increment
      // context.commit('IncrementOdd', value)//等价于Increment
    }
  },
  incrementWait (context, value) {
    setTimeout(() => {
      context.commit('Increment', value)//等价于 IncrementWait
      // context.commit('IncrementWait', value)//等价于Increment
    }, 1000);

  },
}

/* 准备 mutations
用于操作数据(state)  
不建议写业务逻辑 
*/
const mutations = {
  Increment (state, value) {
    state.sum += value
  },
  Decrement (state, value) {
    state.sum -= value
  },
  IncrementOdd (state, value) {
    state.sum += value
  },
  IncrementWait (state, value) {
    state.sum += value
  },
}

// 准备state--用于存储数据(state中存放的就是全局共享数据)
const state = {
  sum: 0,//当前的和
  school: '高新一中',
  subject: '语数外'

}

// 准备getters--用于将state中的数据进行加工
const getters = {
  bigSum (state) {
    return state.sum * 10
  }
}

//创建store
// const store = new Vuex.Store({

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

Count3.vue

  
<template>
  <div>
    <h3>当前求和*10为：{{ bigSum }}</h3>
    <h3>当前求和为：{{ sum }}</h3>
    <h3>我在：{{ school }}，学习:{{subject }}</h3>
    <select v-model.number="selectNo">
      <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 { mapGetters, mapState } from 'vuex'

export default {
  name: 'Count3',
  data () {
    return {
      selectNo: 1,//当前选择的数字
    }
  },
  // 通过计算属性获取state数据
  computed: {
    // totalSum () {
    //   return this.$store.state.sum
    // },
    // mySchool () {
    //   return this.$store.state.school
    // },
    // mySubject () {
    //   return this.$store.state.subject
    // },

    // totalSum ()、 mySchool ()、 mySubject () 等价于以下代码
    // 写法一：对象写法，借助mapState生成计算属性，从state中读取数据
    // ...mapState({ totalSum: 'sum', mySchool: 'school', mySubject: 'subject' }),

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


    // bigSum () {
    //   return this.$store.getters.bigSum
    // },
    // 等价于 
    // 借助mapGetters生成计算属性，从getters中读取数据
    // ...mapGetters(['bigSum']),//数组写法
    ...mapGetters({ bigSum: 'bigSum' }),//对象写法


  },
  mounted () {
    console.log('count this==>', this)
    console.log('count this.$store==>', this.$store)
  },
  methods: {
    increment () {
      // this.$store.dispatch('increment', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Increment', this.selectNo)
    },
    decrement () {
      // this.$store.dispatch('decrement', this.selectNo)
      // 如果没有业务路基处理，可直接使用mutations中对应的方法
      this.$store.commit('Decrement', this.selectNo)
    },
    incrementOdd () {
      this.$store.dispatch('incrementOdd', this.selectNo)
    },
    incrementWait () {
      this.$store.dispatch('incrementWait', this.selectNo)
    },
  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

 

标签：Vue,--,sum,value,60,state,selectNo,bigSum,store
From： https://www.cnblogs.com/YYkun/p/18095137

相关文章

  • conda 安装 (Rocky9 和 Ubuntu20.04)
    Conda官方网址：https://www.anaconda.com/Rocky9环境dnfupdate-ydnfinstallvimwgetlsofgccgcc-c++tarbzip2firewalldopenssl-develmlocatemakechronydocker-ybashAnaconda3-2024.02-1-Linux-x86_64.sh-p/opt/anaconda3vim/etc/profile文件末添加下面一行......
  • 爬虫之JS混淆和加密案例
    需求:中国空气质量在线监测分析平台是一个收录全国各大城市天气数据的网站,包括温度、湿度、PM2.5、AQI等数据,链接为：https://www.aqistudy.cn/html/city_detail.html,网站显示为:一连串的分析该网站所有的空气质量数据都是基于图表进行显示的,并且都是触发鼠标滑动或者点动......
  • 十一 2060. 奶牛选美 (DFS)
    十一2060.奶牛选美(DFS)思路：使用dfs找出两个相邻的斑点，搜索过的点改为'.'防止重复统计，然后依次遍历两个斑点内的点，找出最小曼哈顿距离。importjava.util.*;publicclassMain{staticintn,m;staticchar[][]g;staticList<int[]>[]points=newAr......
  • 前端下载超大文件的完整方案
    本文从前端方面出发实现浏览器下载大文件的功能。不考虑网络异常、关闭网页等原因造成传输中断的情况。分片下载采用串行方式（并行下载需要对切片计算hash，比对hash，丢失重传，合并chunks的时候需要按顺序合并等，很麻烦。对传输速度有追求的，并且在带宽允许的情况下可以做并行分片下载）。......
  • Hadoop：HDFS配置与基本命令
    接上篇Hadoop的单机布署，接下来准备以单机的形式体验一把HDFS。 写在前而，我本机hadoop的根目录是/hadoop/hadoop-2.10.2，请各位读者根据实际情况辨别各自的路径。第一步，修改配置文件/hadoop/hadoop-2.10.2/etc/hadoop/core-site.xml<configuration><property>......
  • 1、融合通信专业术语知识学习VOIP、SIP、350M集群等
    摘自百度：1、VoIP和SIP的概念：VoIP和SIP都是通信领域中的重要概念，它们各自具有独特的功能和应用场景，但也存在一定的联系。VoIP，即VoiceoverInternetProtocol，是一种语音通话技术，它利用互联网协议（IP）进行语音通话与多媒体会议。这种技术将模拟声音信号数字化，并以数据封包的形式在IP......
  • 还写那么多函数？js简单封装，拿去用吧
    ;(function($){ varwprtTheme={ //Maininitfunction init:function(){ this.config(); this.events(); }, //Definevarsforcaching config:function(){ ......
  • macOS Ventura 13.6.6 (22G630) 正式版发布，ISO、IPSW、PKG 下载
    macOSVentura13.6.6(22G630)正式版发布，ISO、IPSW、PKG下载3月26日凌晨，macOSSonoma14.4.1发布，同时带来了macOSVentru13.6.6安全更新。macOSVentura13.6及更新版本，如无特殊说明皆为安全更新，不再赘述。请访问原文链接：https://sysin.org/blog/macOS-Ventura/，查看......
  • 详解SSL证书系列(6)了解HTTP及网络基础
    使用HTTP协议访问Web你知道当我们在网页浏览器（比如Chrome）的地址栏中输入URL时，Web网页是如何呈现的吗？ Web页面当然不会凭空显示出来。根据Web浏览器地址栏中指定的URL，Web浏览器从Web服务器端获取文件资源等信息，从而显示出Web页面。像这种通过发送请求然后获取服务器资源的Web......
  • Go的可变参数函数
    可变函数是指可以接收可变数量的参数的函数。在Golang中，可以传递与函数签名中引用的类型相同的不同数量的参数。在声明可变函数时，最后一个参数的类型前会有一个省略号"..."，这表明该函数可以用任意数量的该类型参数来调用，可以是0个、1个或者多个。这种类型的函数在不知道传递给......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99