vuex actions異步操作

不同于mutations，actions可以處理異步操作

index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    name: 'furong'
  },
  mutations: {
    nameChage(state, dest) {
      setTimeout(() => {
        state.name = dest;
      }, 1000)
    }
  },
  actions: {
  },
  getters: {
  },
  modules: {
  }
})

export default store
           

HelloWorld.vue

<template>
  <div class="hello">
    <p>name: {{$store.state.name}}</p>
    <button type="button" @click="changeClick">改名</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      changeClick() {
        this.$store.commit('nameChage', 'quange');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
           

devtools

修改actions

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    name: 'furong'
  },
  mutations: {
    mutNameChage(state, dest) {
      state.name = dest;
    },
  },
  actions: {
    actNameChage(context, dest) {
      setTimeout(() => {
        context.commit('mutNameChage', dest);
      }, 1000)
    }
  },
  getters: {
  },
  modules: {
  }
})

export default store
           

<template>
  <div class="hello">
    <p>name: {{$store.state.name}}</p>
    <button type="button" @click="changeClick">改名</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      changeClick() {
        this.$store.dispatch('actNameChage', 'quange');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>