getters 配置项

阿夏呀

已于 2022-11-16 12:18:44 修改

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏： vuex store 文章标签： javascript vue.js 前端

于 2022-11-16 11:13:21 首次发布

本文链接：https://blog.youkuaiyun.com/summer_cloudy/article/details/127879641

vuex 同时被 2 个专栏收录

6 篇文章

订阅专栏

store

6 篇文章

订阅专栏

本文详细探讨了Vue.js中getters的配置和应用，如何在组件间优雅地传递和获取状态，同时介绍了其在Vuex状态管理中的作用和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，相当于全局计算属性computed
2. 在store.js中追加getters配置

....
//此时的state相当于data
const state = {
   sum: 0, //当前的和
},

const getters = {
   bigSum(state) {
      return state.sum * 10
   }
}

export default new Vuex.Store({
   ....
   state,
   getters,
})

3. 组件中读取数据：$store.getters.bigSum
4. 完整示例：
（1）src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'

//应用Vuex插件
Vue.use(Vuex)

//准备actions对象 ==> 响应组件中用户的动作
const actions = {
   addOdd(context,value) {
      if(context.state.sum % 2) {
         context.commit('ADD',value)
      }
   },
   addWait(context,value) {
      setTimeout(()=>{
         context.commit('ADD',value)
      },500)
   }
}

//准备mutations对象 ==> 修改state中的数据
const mutations = {
   ADD(state,value) {
      state.sum += value
   },
   SUB(state,value) {
      state.sum -= value
   }
},

//准备state对象 ==> 保存具体的数据
const state = {
   sum: 0, //当前的和
}

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

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

（2）src/Count.vue

<template>
   <div>
      <h3>当前求和为：{{ $store.state.sum }}</h3>
      <h3>当前求和的10倍为：{{ $store.getters.bigSum }}</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>
</termplate>

<script>
export default {
   name: 'Count',
   data() {
      return {
         n: 1,
      }
   },
   methods: {
      increment() {
         this.$store.commit('ADD',this.n)
      },
      decrement() {
         this.$store.commit('SUB',this.n)
      },
      incrementOdd() {
         this.$store.dispatch('addOdd',this.n)
      },
      incrementWait() {
         this.$store.dispatch('addWait',this.n)
      }
   }
}
</script>

<style scoped>
button {
   margin-left: 5px;
}
</style>