当前位置：首页 > news >正文

大白话Vuex 核心概念（state、mutations、actions）的使用案例与原理

news 2025/9/14 22:46:14

大白话Vuex 核心概念（state、mutations、actions）的使用案例与原理

Vuex是Vue.js应用程序中专门用来管理状态的工具，就好像是一个大管家，帮你把项目里一些重要的数据和操作管理得井井有条。下面用大白话结合案例来介绍Vuex核心概念state、mutations、actions的使用案例与原理：

state

原理：state就像是一个仓库，用来存放数据的。在Vuex里，它就是用来存储整个应用程序中需要共享的数据的地方，比如用户的登录状态、用户名、购物车商品列表等。组件可以从这个仓库里获取数据来展示。
使用案例

// 创建一个Vuex实例
const store = new Vuex.Store({state: {// 存储当前登录用户的姓名username: '张三' }
});// 在Vue组件中获取state中的数据
export default {computed: {user() {// 通过this.$store.state来访问state中的数据return this.$store.state.username; }}
};

mutations

原理：mutations就像是仓库管理员，专门负责修改仓库（state）里的数据。但是这个管理员很严格，只能通过它规定的方式来修改数据，这样可以保证数据的修改是可控的、可追踪的。而且mutations里的函数必须是同步的，不能是异步的，就像管理员一次只能做一件事，不能同时做好几件事。
使用案例

const store = new Vuex.Store({state: {count: 0},mutations: {// 定义一个名为increment的mutation来增加count的值increment(state) { state.count++;}}
});// 在Vue组件中提交mutation
methods: {add() {// 通过this.$store.commit来提交mutationthis.$store.commit('increment'); }
}

actions

原理：actions可以理解为是仓库的调度员，它不直接修改数据，但是可以指挥管理员（mutations）去修改数据。它的作用是处理一些异步操作，比如从服务器获取数据，等数据拿到了再告诉管理员去修改仓库里的数据。
使用案例

const store = new Vuex.Store({state: {userList: []},mutations: {// 定义一个名为setUserList的mutation来设置用户列表setUserList(state, users) { state.userList = users;}},actions: {// 定义一个名为fetchUsers的action来获取用户列表async fetchUsers({ commit }) { // 假设这里是发送网络请求获取用户数据const response = await axios.get('https://example.com/api/users'); // 拿到数据后，通过commit提交mutation来修改statecommit('setUserList', response.data); }}
});// 在Vue组件中调用action
methods: {async getUsers() {// 通过this.$store.dispatch来调用actionawait this.$store.dispatch('fetchUsers'); }
}