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

大白话3Vuex 是什么，具体怎么用？

news 来源：原创 2025/6/9 22:29:01

Vuex就好比是一个专门给Vue.js应用程序用的“大仓库”，用来管理整个应用里各个组件的状态，这里说的状态可以理解成数据，比如用户的登录状态、购物车商品信息等。它能让这些数据在不同组件之间的传递和使用变得更方便、更有条理，而且能保证数据按照一定的规则变化，不会乱成一团。以下是它的具体使用步骤：

安装和引入

首先，得在你的Vue项目里安装Vuex。一般是在命令行里输入 npm install vuex 或者 yarn add vuex，这就好比是把Vuex这个工具给下载到你的项目里了。
然后，在项目里要引入Vuex。在 main.js 文件里，把Vuex和Vue的相关东西都引入进来，像这样：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

这里的 Vue.use(Vuex) 就是告诉Vue项目，咱们要开始用Vuex这个“大仓库”啦。

创建store

接下来，要创建一个 store，这就像是在仓库里划分不同的区域来放不同的东西。一般在项目里新建一个 store 文件夹，里面有个 index.js 文件，在这个文件里来创建 store。

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    // 存放数据的地方，比如有个count用来记录数字
    count: 0
  },
  mutations: {
    // 用来修改state里数据的方法，比如增加count
    increment(state) {
      state.count++
    }
  },
  actions: {
    // 可以用来处理异步操作，然后再提交mutation来修改数据
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    // 用来对state里的数据进行加工处理，比如得到一个翻倍的count
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

在组件中使用

在组件里就可以用Vuex这个“大仓库”里的数据和方法啦。比如在一个Vue组件里：

<template>
  <div>
    <!-- 显示count的值 -->
    <p>Count: {{ count }}</p>
    <!-- 显示翻倍后的count的值 -->
    <p>Double Count: {{ doubleCount }}</p>
    <!-- 点击按钮触发增加count的方法 -->
    <button @click="increment">Increment</button>
    <!-- 点击按钮触发异步增加count的方法 -->
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

export default {
  computed: {
    // 把store里的count和doubleCount映射到组件里
   ...mapState(['count']),
   ...mapGetters(['doubleCount'])
  },
  methods: {
    // 把store里的increment和incrementAsync方法映射到组件里
   ...mapActions(['increment', 'incrementAsync'])
  }
}
</script>

在上面这个例子里，mapState、mapGetters、mapActions 这些工具就像是连接组件和Vuex“大仓库”的桥梁，让组件能很方便地拿到仓库里的数据，调用仓库里的方法。

总之，Vuex就是通过 state 来存数据，mutations 来改数据，actions 来处理复杂逻辑和异步操作，getters 来加工数据，让整个Vue应用里的数据管理变得更高效、更有序。

Vuex中的state、mutation、action和getter

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。下面详细介绍 Vuex 中的 state、mutation、action 和 getter。

1. State

概念：state 就像是一个数据仓库，用来存储应用中的所有状态（数据）。在 Vuex 中，所有组件共享同一个 state，这意味着不同组件可以访问和使用 state 中的数据，就像多个部门共享同一个公司数据库里的数据一样。
使用方式：在创建 Vuex 的 store 时定义 state。

import Vuex from 'vuex';

const store = new Vuex.Store({
    state: {
        // 存储用户信息
        user: {
            name: '张三',
            age: 25
        },
        // 存储商品列表
        products: [
            { id: 1, name: '苹果', price: 5 },
            { id: 2, name: '香蕉', price: 3 }
        ]
    }
});

export default store;

组件中访问：在 Vue 组件中，可以通过 this.$store.state 来访问 state 中的数据。

<template>
    <div>
        <p>用户姓名: {{ $store.state.user.name }}</p>
        <p>商品数量: {{ $store.state.products.length }}</p>
    </div>
</template>

<script>
export default {
    // 组件代码
};
</script>

2. Mutation

概念：mutation 是改变 state 的唯一途径，它就像是一个“数据修改指令”。每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler），回调函数接收 state 作为第一个参数，通过这个回调函数可以对 state 进行修改。
使用方式：在创建 store 时定义 mutation。

import Vuex from 'vuex';

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        // 事件类型为 'increment' 的 mutation
        increment(state) {
            // 修改 state 中的 count 值
            state.count++;
        },
        // 接收额外参数的 mutation
        incrementBy(state, payload) {
            state.count += payload;
        }
    }
});

export default store;

触发 Mutation：在组件中，可以通过 this.$store.commit 方法来触发 mutation。

<template>
    <div>
        <p>当前计数: {{ $store.state.count }}</p>
        <button @click="increment">增加计数</button>
        <button @click="incrementBy(5)">增加 5</button>
    </div>
</template>

<script>
export default {
    methods: {
        increment() {
            // 触发 'increment' mutation
            this.$store.commit('increment');
        },
        incrementBy(value) {
            // 触发 'incrementBy' mutation 并传递参数
            this.$store.commit('incrementBy', value);
        }
    }
};
</script>

注意事项：mutation 必须是同步函数，因为如果是异步操作，Vuex 就无法追踪状态的变化顺序，导致状态管理混乱。

3. Action

概念：action 类似于 mutation，但 action 可以包含任意异步操作，它就像是一个“任务调度器”。action 不直接修改 state，而是通过触发 mutation 来间接修改 state。
使用方式：在创建 store 时定义 action。

import Vuex from 'vuex';

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        // 异步增加计数的 action
        incrementAsync(context) {
            // 模拟异步操作
            setTimeout(() => {
                // 触发 'increment' mutation
                context.commit('increment');
            }, 1000);
        }
    }
});

export default store;

触发 Action：在组件中，可以通过 this.$store.dispatch 方法来触发 action。

<template>
    <div>
        <p>当前计数: {{ $store.state.count }}</p>
        <button @click="incrementAsync">异步增加计数</button>
    </div>
</template>

<script>
export default {
    methods: {
        incrementAsync() {
            // 触发 'incrementAsync' action
            this.$store.dispatch('incrementAsync');
        }
    }
};
</script>

参数传递：action 的回调函数接收一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 触发 mutation，也可以通过 context.state 和 context.getters 来获取 state 和 getter。同时，action 也可以接收额外的参数。

4. Getter

概念：getter 就像是 state 的计算属性，用于对 state 中的数据进行加工处理，返回一个新的值。当 state 中的数据发生变化时，getter 会自动更新。
使用方式：在创建 store 时定义 getter。

import Vuex from 'vuex';

const store = new Vuex.Store({
    state: {
        products: [
            { id: 1, name: '苹果', price: 5 },
            { id: 2, name: '香蕉', price: 3 }
        ]
    },
    getters: {
        // 计算商品总价的 getter
        totalPrice(state) {
            return state.products.reduce((total, product) => total + product.price, 0);
        }
    }
});

export default store;

组件中访问：在 Vue 组件中，可以通过 this.$store.getters 来访问 getter。

<template>
    <div>
        <p>商品总价: {{ $store.getters.totalPrice }}</p>
    </div>
</template>

<script>
export default {
    // 组件代码
};
</script>

综上所述，state 用于存储数据，mutation 用于同步修改 state，action 用于处理异步操作并触发 mutation，getter 用于对 state 中的数据进行计算和获取。它们共同构成了 Vuex 的状态管理体系，使得应用的状态管理更加清晰和可预测。

Vuex中的state、mutation、action和getter的区别是什么？

咱来好好唠唠 Vuex 里的 state、mutation、action 和 getter 是干啥的，有啥区别，就把它们想象成一个公司里不同岗位的员工。

state：公司的资料库

作用：state 就像是公司的资料库，里面存着公司所有重要的信息，比如员工名单、项目进度、财务数据啥的。在 Vuex 里，state 就是用来存放应用里所有数据的地方，所有组件都能从这个“资料库”里拿数据用。
特点：它是数据的源头，组件可以读取这里面的数据来展示到页面上，但不能直接去修改它里面的数据。就好比公司员工能看资料库的信息，但是不能自己随便改。
举例：假如你做一个购物车应用，state 里就会存着购物车里的商品列表、商品总价这些数据。

mutation：数据修改专员

作用：mutation 就像是公司里专门负责修改资料库信息的专员。在 Vuex 里，只有 mutation 能直接修改 state 里的数据。它就像有一把修改资料库的钥匙，别人都没有。
特点：它只能做同步操作，也就是一件事做完才能做下一件事，不能同时干好几件事。这就好比修改专员一次只能改一条信息，改完了才能改下一条。
举例：当用户往购物车添加一个商品时，就会触发一个 mutation，这个 mutation 会去修改 state 里的商品列表和总价。

action：业务协调员

作用：action 就像是公司里的业务协调员，负责处理一些复杂的业务逻辑和异步操作。异步操作就是那种不能马上有结果的事情，比如从服务器取数据。action 可以先去做这些复杂的事情，做完了再告诉 mutation 去修改 state 里的数据。
特点：它可以做异步操作，比如发网络请求去服务器拿数据。它不能直接改 state 里的数据，得通过调用 mutation 来间接修改。就好比业务协调员自己不能改资料库信息，得让修改专员去改。
举例：当用户点击登录按钮时，action 会先把用户输入的账号密码发给服务器验证，等服务器返回验证结果后，再触发一个 mutation 去修改 state 里的用户登录状态。

getter：数据分析师

作用：getter 就像是公司里的数据分析师，它的工作是对 state 里的数据进行加工处理，然后给出一些有价值的分析结果。在 Vuex 里，getter 可以根据 state 里的数据计算出一些新的数据。
特点：它不修改 state 里的数据，只是读取和分析。就像数据分析师不改动资料库信息，只是看信息然后做分析。而且当 state 里的数据变化时，getter 会自动更新分析结果。
举例：在购物车应用里，state 里存着每个商品的价格和数量，getter 可以根据这些数据计算出商品的总价，然后组件可以直接用这个总价，不用自己再去算。