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

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

news 来源：原创 2025/5/25 2:13:25

大白话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来提交mutation
        this.$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来修改state
            commit('setUserList', response.data); 
        }
    }
});

// 在Vue组件中调用action
methods: {
    async getUsers() {
        // 通过this.$store.dispatch来调用action
        await this.$store.dispatch('fetchUsers'); 
    }
}