脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vuex state修改

在组件中修改vuex中state的具体实现方法

 更新时间：2025年02月14日 11:32:45   作者：前端美少女战士  
在组件中修改 Vuex 中的 state,根据使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但总体思路都是借助 Vuex 提供的 mutations 或 actions 来实现,以下分别介绍两种版本下的具体实现方法,需要的朋友可以参考下

Vue 2 中修改 Vuex 的 state

1. 使用 mutations

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;
        }
    }
});

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 调用 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 的基础方式。

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>

总结

在组件中修改 Vuex 的 state，一般优先通过 mutations 进行同步修改；如果涉及异步操作，则使用 actions 先处理异步逻辑，再通过 commit 调用 mutations 来完成 state 的修改。同时，根据 Vue 版本不同，组件中使用 Vuex 的语法也有所差异，需要根据实际情况选择合适的方式。

以上就是在组件中修改vuex中state的具体实现方法的详细内容，更多关于vuex state修改的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

    vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

    这篇文章主要介绍了vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 通过GASP让vue实现动态效果实例代码详解

    通过GASP让vue实现动态效果实例代码详解

    GASP是一个JavaScript动画库，它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起，来创造一个高内聚的流畅动画序列。这篇文章主要介绍了通过GASP让vue实现动态效果,需要的朋友可以参考下
    2019-11-11
  • vue.js $refs和$emit 父子组件交互的方法

    vue.js $refs和$emit 父子组件交互的方法

    本篇文章主要介绍了vue.js $refs和$emit 父子组件交互的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue2 中二级路由高亮问题及配置方法

    vue2 中二级路由高亮问题及配置方法

    这篇文章主要介绍了vue2 中二级路由 高亮问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 在Vue中使用xlsx组件实现Excel导出功能的步骤详解

    在Vue中使用xlsx组件实现Excel导出功能的步骤详解

    在现代Web应用程序中,数据导出到Excel格式是一项常见的需求,Vue.js是一种流行的JavaScript框架,允许我们构建动态的前端应用程序,本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能,需要的朋友可以参考下
    2023-10-10
  • Vue中this.$nextTick()的理解与使用方法

    Vue中this.$nextTick()的理解与使用方法

    this.$nextTick是在下次dom更新循环之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom,下面这篇文章主要给大家介绍了关于Vue中this.$nextTick()的理解与使用的相关资料,需要的朋友可以参考下
    2022-02-02
  • vue+elementui实现表格多级表头效果

    vue+elementui实现表格多级表头效果

    这篇文章主要为大家详细介绍了vue + elementui实现表格多级表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue实现带过渡效果的下拉菜单功能

    vue实现带过渡效果的下拉菜单功能

    这篇文章主要为大家详细介绍了vue仿写带过渡效果的下拉菜单功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Element使用el-table组件二次封装

    Element使用el-table组件二次封装

    这篇文章主要为大家介绍了Element使用el-table组件二次封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • vue 解决data中定义图片相对路径页面不显示的问题

    vue 解决data中定义图片相对路径页面不显示的问题

    这篇文章主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论