【vuex入门系列03】实战案例：利用dispatch提交actions解决异步问题

标签（空格分隔）： vue

---

官方文档

https://vuex.vuejs.org/zh-cn/

以下操作全部放在了这个项目当中

https://github.com/itguide/vu...

提交的时候页面状态发生变化，但是真正的状态是没有变化的

在/src/store/index.js 的mutations里面模拟异步发现状态是混乱的，页面改变了，而devtool工具里面的state状态不一致 如下面图片

/src/store/index.js 代码如下

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

Vue.use(Vuex)

let store = new Vuex.Store({
    state: {
        num: 100
    },
    mutations: {
        // 任何时候改变state的状态都通过提交 mutation 来改变
        // 里面可以定义多个函数，当触发这个函数就会改变state状态
        addIncrement(state, stark) {
            console.log(stark);
            // 接收一个state作为参数， 相当于上面的state
            // 模拟异步，状态会发生混乱
            setTimeout(() => {
                state.num += stark.n;
            }, 1000)

        },
        minIncrement(state) {
            state.num -= 5;
        }
    }
})

export default store

解决上面异步问题需要利用vuex里面的actions

代码如下

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

Vue.use(Vuex)

let store = new Vuex.Store({
    state: {
        num: 100
    },
    mutations: {
        // 任何时候改变state的状态都通过提交 mutation 来改变
        // 里面可以定义多个函数，当触发这个函数就会改变state状态
        addIncrement(state, stark) {
            console.log(stark);
            // 接收一个state作为参数， 相当于上面的state
            // 模拟异步，状态会发生混乱
            // 页面的数据和这个里面的数据不一致，
            // 当我们在这里请求接口的时候，会发生异步，会出现问题

            // mutations设计原则是同步的
            // setTimeout(() => {
            state.num += stark.n;
            // }, 1000)

        },
        minIncrement(state) {
            state.num -= 5;
        }
    },
    actions: {
        addAction(context) {
            // context 是一个对象
            setTimeout(() => {
                context.commit('addIncrement', { n: 5 })
            }, 1000)
        }
    }
})

export default store

在组件里面利用this.$store.dispatch("addAction"); 提交actions

代码如下

iew actions state 关系图

整个关系图