在組件中修改vuex中state的具體實現(xiàn)方法

更新時間：2025年02月14日 11:32:45 作者：前端美少女戰(zhàn)士

在組件中修改 Vuex 中的 state,根據(jù)使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但總體思路都是借助 Vuex 提供的 mutations 或 actions 來實現(xiàn),以下分別介紹兩種版本下的具體實現(xiàn)方法,需要的朋友可以參考下

Vue 2 中修改 Vuex 的 state

1. 使用 mutations

mutations 是修改 state 的唯一推薦方式，并且它必須是同步函數(shù)。

Vuex 存儲配置：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        message: 'Hello, Vuex!'
    },
    mutations: {
        updateMessage(state, newMessage) {
            state.message = newMessage;
        }
    }
});

export default store;

組件中使用 mutations 修改 state：

<template>
    <div>
        <p>{{ message }}</p>
        <input v-model="newMessage" />
        <button @click="updateMessage">Update Message</button>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
    computed: {
        ...mapState(['message']),
        newMessage: {
            get() {
                return '';
            },
            set(value) {
                this._newMessage = value;
            }
        }
    },
    data() {
        return {
            _newMessage: ''
        };
    },
    methods: {
        ...mapMutations(['updateMessage']),
        updateMessage() {
            this.updateMessage(this._newMessage);
        }
    }
};
</script>

2. 使用 actions

actions 主要用于處理異步操作，最終會通過 commit 調(diào)用 mutations 來修改 state。

Vuex 存儲配置：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        message: 'Hello, Vuex!'
    },
    mutations: {
        updateMessage(state, newMessage) {
            state.message = newMessage;
        }
    },
    actions: {
        asyncUpdateMessage(context, newMessage) {
            setTimeout(() => {
                context.commit('updateMessage', newMessage);
            }, 1000);
        }
    }
});

export default store;

組件中使用 actions 修改 state：

<template>
    <div>
        <p>{{ message }}</p>
        <input v-model="newMessage" />
        <button @click="asyncUpdateMessage">Update Message Asynchronously</button>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
    computed: {
        ...mapState(['message']),
        newMessage: {
            get() {
                return '';
            },
            set(value) {
                this._newMessage = value;
            }
        }
    },
    data() {
        return {
            _newMessage: ''
        };
    },
    methods: {
        ...mapActions(['asyncUpdateMessage']),
        asyncUpdateMessage() {
            this.asyncUpdateMessage(this._newMessage);
        }
    }
};
</script>

Vue 3 中修改 Vuex 的 state

1. 使用 mutations

同樣，mutations 是修改 state 的基礎(chǔ)方式。

Vuex 存儲配置：

// src/store/index.js
import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            message: 'Hello, Vuex!'
        };
    },
    mutations: {
        updateMessage(state, newMessage) {
            state.message = newMessage;
        }
    }
});

export default store;

組件中使用 mutations 修改 state：

<template>
    <div>
        <p>{{ message }}</p>
        <input v-model="newMessage" />
        <button @click="updateMessage">Update Message</button>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const message = computed(() => store.state.message);
const newMessage = computed({
    get() {
        return '';
    },
    set(value) {
        store.commit('updateMessage', value);
    }
});

const updateMessage = () => {
    store.commit('updateMessage', newMessage.value);
};
</script>

2. 使用 actions

用于處理異步操作并最終修改 state。

Vuex 存儲配置：

// src/store/index.js
import { createStore } from 'vuex';

const store = createStore({
    state() {
        return {
            message: 'Hello, Vuex!'
        };
    },
    mutations: {
        updateMessage(state, newMessage) {
            state.message = newMessage;
        }
    },
    actions: {
        asyncUpdateMessage(context, newMessage) {
            setTimeout(() => {
                context.commit('updateMessage', newMessage);
            }, 1000);
        }
    }
});

export default store;

組件中使用 actions 修改 state：

<template>
    <div>
        <p>{{ message }}</p>
        <input v-model="newMessage" />
        <button @click="asyncUpdateMessage">Update Message Asynchronously</button>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const message = computed(() => store.state.message);
const newMessage = computed({
    get() {
        return '';
    },
    set(value) {
        store.dispatch('asyncUpdateMessage', value);
    }
});

const asyncUpdateMessage = () => {
    store.dispatch('asyncUpdateMessage', newMessage.value);
};
</script>

總結(jié)

在組件中修改 Vuex 的 state，一般優(yōu)先通過 mutations 進(jìn)行同步修改；如果涉及異步操作，則使用 actions 先處理異步邏輯，再通過 commit 調(diào)用 mutations 來完成 state 的修改。同時，根據(jù) Vue 版本不同，組件中使用 Vuex 的語法也有所差異，需要根據(jù)實際情況選擇合適的方式。

以上就是在組件中修改vuex中state的具體實現(xiàn)方法的詳細(xì)內(nèi)容，更多關(guān)于vuex state修改的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: