【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 關係圖

整個關係圖