Vue学习笔记59--store(getters)

store(getters)

1.  概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
2. 在store.js(src/store/index.js)中追加getters配置
   • ?

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

     // 准备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 })

3. 组件中读取数据：$store.getters.bigSum==>{{ $store.getters.bigSum }}

示例一：

Count.vue

?

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

<template>   <div>     <h3>当前求和为：{{ $store.state.sum }}</h3>     <h3>当前求和*10为：{{ $store.getters.bigSum }}</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> export default {   name: 'Count',   data () {     return {       selectNo: 1,//当前选择的数字         }   },   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>

src/store/index.js

?

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

// 该文件用于创建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 = {   /*  increment (context, value) {      context.commit('Increment', value) //Increment 为 mutations中的方法    },    decrement (context, value) {      context.commit('Decrement', value)    }, */   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) {     // if (state.sum % 2) {  //去action中处理哦     state.sum += value     // }   },   IncrementWait (state, value) {     state.sum += value     // setTimeout(() => {     //   state.sum += value     // }, 1000);   }, }   // 准备state--用于存储数据(state中存放的就是全局共享数据) const state = {   sum: 0,//当前的和 }   // 准备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