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

store(getters)

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

   • // 准备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

<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

// 该文件用于创建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