异步修改数据

 

1、计时器为异步操作，在同步修改时使用计时器会出现问题，第一次点击修改后页面的值会发生变化，但state中不会改变，所以需要进行异步修改数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //全局状态  初始值
  state: {
    num:66
  },
  //加工数据
  getters:{
    //参数为state对象
    //处理后数据在$store.getters中
    num2(state){
      return state.num*2-1
    }
  },
  //用来同步修改state内的值
  mutations: {
    //两个参数（全局状态state，payload参数/一般为对象）
    changeNum(state,payload){
      setTimeout(()=>{
        // context.commit('changeNum',{num:99})
        //计时器为异步操作，在同步修改时使用计时器会出现问题，第一次点击修改后页面的值会发生变化，但state中不会改变
        //所以需要进行异步修改数据
        state.num = payload.num
      },1000)
    }
  }
})

2、异步修改数据actions，actions中的方法参数一与同步不同，为centext

index中代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //全局状态  初始值
  state: {
    num:66
  },
  //加工数据
  getters:{
    //参数为state对象
    //处理后数据在$store.getters中
    num2(state){
      return state.num*2-1
    }
  },
  //用来同步修改state内的值
  mutations: {
    //两个参数（全局状态state，payload参数/一般为对象）
    changeNum(state,payload){
      state.num = payload.num
    }
  },
  //异步修改数据
  actions: {
    //这里的参数一和同步不同，参数一为context
    asyncChangeNum(context,payload){
      console.log(context)
　　　　//payload打印结果为111，演示用，没有可以不传
      console.log(payload)
      //把异步交给actions，把同步修改数据处理交给mutations
      setTimeout(()=>{
        //两个参数（同步操作中方法，参数99/一般为对象）
        context.commit('changeNum',{num:99})
      },1000)
    }
  },
})

vuex.vue中定义点击事件

<template>
    <div>
<!--        使用时不加this-->
<!--        打印结果为66    修改后为99-->
        {{$store.state.num}}
<!--        打印结果为131   修改后为197-->
        {{$store.getters.num2}}
<!--        添加点击事件-->
        <button @click="asyncChange">异步修改vuex</button>
    </div>
</template>

<script>
    export default {
        name: "vuex",
        created(){
            //num所在位置this.$store.state
            console.log(this.$store.state.num)
            //处理后数据num2在$store.getters中
            console.log(this.$store)
        },
        methods:{
            asyncChange(){
                console.log(this.$store)
　　　　　　　　　　//参数111为演示用，可以不传
                this.$store.dispatch('asyncChangeNum',111)
            }
        }

    }
</script>

<style scoped>

</style>