store(getters)
- 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工
- 在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 })
-
- 组件中读取数据:$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
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!