【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

代码如下

<template> 
    <div>
        <h2>加减法计算器</h2>
        <div>
            <input type="button" value="-" @click="minHandle"/>
                <span>{{num}}</span>
            <input type="button" value="+" @click="addHandle"/>
        </div>
    </div>
</template>
<script>
    export default {
        // data(){
        //     return {
        //         // num:100
        //         num: this.$store.state.num,
        //     }
        // },
        computed:{
            num(){
                return this.$store.state.num
            }
        },
        methods:{
            addHandle(){
                // this.num += 5;
                // 点击的时候需要改变状态，提交mutation addIncrement
                // 利用$store.commit 里面 写参数相当于 mutation的函数名字
                // this.$store.commit("addIncrement",{name:'stark',age:18,n:5})
                // this.$store.commit({
                //     type:"addIncrement",
                //     n:5,
                //     age:18,
                //     name:'stark.wang'
                // })

                this.$store.dispatch("addAction"); // 在这提交 actions

            },
            minHandle(){
                // this.num -= 5;
                this.$store.commit("minIncrement")
                // this.$store.         
            }
        }
    }
</script>

iew actions state 关系图

整个关系图