Modify the specific implementation method of state in vuex in component

Modify Vuex's state in Vue 2

1. Use mutations

mutationsIt's a modificationstateThe only recommended way to and it must be a synchronous function.

Vuex Storage Configuration：

// src/store/
import Vue from 'vue';
import Vuex from 'vuex';

(Vuex);

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

export default store;

Used in componentsmutationsRevisestate：

<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._newMessage);
        }
    }
};
</script>

2. Use actions

actionsMainly used to handle asynchronous operations, it will eventually passcommitCallmutationsCome to modifystate。

Vuex Storage Configuration：

// src/store/
import Vue from 'vue';
import Vuex from 'vuex';

(Vuex);

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

export default store;

Used in componentsactionsRevisestate：

<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._newMessage);
        }
    }
};
</script>

Modify Vuex's state in Vue 3

1. Use mutations

same,mutationsIt's a modificationstateThe basic method.

Vuex Storage Configuration：

// src/store/
import { createStore } from 'vuex';

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

export default store;

Used in componentsmutationsRevisestate：

<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(() => );
const newMessage = computed({
    get() {
        return '';
    },
    set(value) {
        ('updateMessage', value);
    }
});

const updateMessage = () => {
    ('updateMessage', );
};
</script>

2. Use actions

Used to handle asynchronous operations and final modificationstate。

Vuex Storage Configuration：

// src/store/
import { createStore } from 'vuex';

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

export default store;

Used in componentsactionsRevisestate：

<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(() => );
const newMessage = computed({
    get() {
        return '';
    },
    set(value) {
        ('asyncUpdateMessage', value);
    }
});

const asyncUpdateMessage = () => {
    ('asyncUpdateMessage', );
};
</script>

Summarize

Modify Vuex's in the componentstate, generally preferredmutationsMake synchronous modifications; if asynchronous operations are involved, useactionsFirst handle asynchronous logic, then passcommitCallmutationsCome and finishstateModification. At the same time, depending on the Vue version, the syntax of using Vuex in components also varies, and you need to choose the appropriate method according to the actual situation.

The above is the detailed content of the specific implementation method of modifying state in vuex in components. For more information about modifying vuex state, please pay attention to my other related articles!