当state中的数据需要经过加工后在使用
//该文件用于创建vuex中的store //引入vuex import Vue from 'vue' import Vuex from 'vuex' //使用插件 Vue.use(Vuex); //猪备actions--用于响应组件中的动作 const actions={ // jia:function (context,vaule) { // context.commit("JIA", vaule) // }, // jian: function (context, vaule) { // context.commit("JIAN", vaule) // }, jiaOdd: function (context, vaule) { if (context.state.sum%2) { context.commit("JIA", vaule) } }, jiaWate: function (context, vaule) { setTimeout(() => { context.commit("JIA", vaule) }, 500); }, } // 准备mutations--用于操作数据(state) const mutations = { JIA:function (state,value) { state.sum+=value; }, JIAN: function (state, value) { state.sum -= value; }, } //准备state--用于存储数据 const state = { sum: 0//当前的和 } //用于将state中的数据进行加工 const getters={ bigSum(state){ return state.sum*10 } } //创建store const store=new Vuex.Store({ actions: actions, mutations: mutations, state: state, getters: getters }); //导出store export default store
<template> <div class="count"> <h2 > 当前求和为 :{{$store.state.sum}}</h2> <h3 > 当前求和放大十倍为为 :{{$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="incrementWate">等一等再加</button> </div> </template> <script> import {nanoid} from 'nanoid' export default { name:"Count", data() { return { n:1,//用户选择的数字 } }, mounted() { console.log(this.$store) }, methods: { increment(){ // this.$store.dispatch('jia',this.n) this.$store.commit('JIA',this.n) }, decrement(){ this.$store.commit('JIAN',this.n) }, incrementOdd(){ // if (this.Sstore.state.sum%2) { this.$store.dispatch('jiaOdd',this.n) // } }, incrementWate(){ // setTimeout(() => { this.$store.dispatch('jiaWate',this.n) // }, 500); }, }, } </script> <style scoped> button{ margin: 5px; } </style>
这时候使用配置项getters
标签:function,vaule,getters,state,context,vuex,store From: https://www.cnblogs.com/xiaobaizitaibai/p/16894769.html