VUEX getters 配置项

 

 

获取bigSum

<template>
  <div id="app">
      <h1>当前总数为:{{$store.state.nbr}}</h1>
      <h2>放大十倍总数为:{{$store.getters.bigSum}}</h2>
          <select  v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          </select>
      <button @click="add">+</button>
      <button @click="subtract">-</button>
      <button @click="odd">为奇数再加</button>
      <button @click="item">等一等再加</button>
    <!-- <router-view/> -->
  </div>
</template>

 

state: {
      nbr:0,//当前的和
  },
  // 用于操作数据
  mutations: {
      // 加
      add(state,value){
        state.nbr +=value
      },
      // 减
      subtract(state,value){
              state.nbr -=value
      },
      // 是奇数再加
      odd(state,value){
            if (state.nbr % 2 ==1) {
                state.nbr += value
            }
      },
      // 等一等再加
      item(state,value){
            setTimeout(()=>{
                            state.nbr += value
            //                 console.log(this.nbr);
            //             // 时间间隔
            },1000)
        },
  },
  // 用于响应组件中的动作
  actions: {
      add (context,value){
          //context.commit('名字不是固定的可以和主页面的名字不一样',value)
          context.commit('add',value)
      },
      subtract (context,value){
                context.commit('subtract',value)
      },
      odd(context,value){
                context.commit('odd',value)
      },
      item(context,value){
                context.commit('item',value)
      }
  },
　　　　//假如这是一个很复杂的计算属性
  getters:{
      bigSum(state){
          return state.nbr*10
      }
  }

getters的作用就是加工state

完整的是要和前面发布的一块