VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)

苹果醋32025-11-21 20:07

一.VueX

1. 关于 VueX

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具------VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

1.2 安装

由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.x构建的目录。

以下步骤的前提是你已经完成了Vue项目构建，并且已转至该项目的文件目录下。

Npm安装Vuex

npm i vuex -s

Yarn安装Vuex

yarn add vuex

在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js

复制代码 
│  App.vue
│  main.js
│
├─assets
│      logo.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
       index.js

1.3

1.3.1 初始化store下index.js中的内容
复制代码 
import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

export default store

1.3.2 将store挂载到当前项目的Vue实例当中去

打开main.js

复制代码 
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

1.3.3 在组件中使用Vuex

例如在App.vue中，我们要将state中定义的name拿来在h1标签中显示:

复制代码 
<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.name }}</h1>
    </div>
</template>

或者要在组件方法中使用:

复制代码 
...,
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
...

1.4 安装Vue开发工具VueDevtools

在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展------VueDevtools。


VueDevtools.png

二、 VueX中的核心内容

在VueX对象中，其实不止有state,还有用来操作state中数据的方法集，以及当我们需要对state中的数据需要加工的方法集等等成员。

成员列表 ：
state 存放状态，基本数据
mutations 提交更改同步数据的方法，对state成员进行操作的方法集，比如对该数据的增、删、改等操作
getters 加工state成员给外界，需要缓存的值用getters存起来,对state成员进行筛选过滤
actions 像一个装饰器，包裹mutations，异步操作
modules 模块化Vuex状态管理

2.1 VueX的工作流程


Vuex流程图.png

首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。
如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。注意，1.3.3节中有提到，不建议在组件中直接对state中的成员进行操作，这是因为直接修改(例如：this.$store.state.name = 'hello')的话不能被VueDevtools所监控到。最后被修改后的state成员会被渲染到组件的原位置当中去。

2.2 Mutations

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。

2.2.1 Mutations使用方法

mutations方法都有默认的形参：

([state] [,payload])

  • state是当前VueX对象中的state
  • payload是该方法在被调用时传递参数使用的
例如，我们编写一个方法，当被执行时，能把下例中的name值修改为"jack",我们只需要这样做：
复制代码 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({
    state:{
        name:'helloVueX'
    },
    mutations:{
        //es6语法，等同edit:funcion(){...}
        edit(state){
            state.name = 'jack'
        }
    }

而在组件中，我们需要这样去调用这个mutation------例如在App.vue的某个method中:

复制代码 
this.$store.commit('edit')

2.2.2 Mutation传值

在实际生产过程中，会遇到需要在提交某个mutation时需要携带一些参数给方法使用。

单个值提交时:

复制代码 
this.$store.commit('edit',15)

当需要多参提交时，推荐把他们放在一个对象中来提交:

复制代码 
this.$store.commit('edit',{age:15,sex:'男'})

接收挂载的参数：

复制代码 
          edit(state,payload){
            state.name = 'jack'
            console.log(payload) // 15或{age:15,sex:'男'}
        }

另一种提交方式

复制代码 
this.$store.commit({
    type:'edit',
    payload:{
        age:15,
        sex:'男'
    }
})

2.2.3 增删state中的成员

为了配合Vue的响应式数据，我们在Mutations的方法中，应当使用Vue提供的方法来进行操作。如果使用delete或者xx.xx = xx的形式去删或增，则Vue不能对数据进行实时响应。

Vue.set：为某个对象设置成员的值，若不存在则新增。如对state对象中添加一个age成员：
复制代码 
Vue.set(state,"age",15)
Vue.delete：删除成员。如将刚刚添加的age成员删除：
复制代码 
Vue.delete(state,'age')

2.3 Getters 对state中的成员进行筛选过滤

getters中的方法有两个默认参数：([state] , [getters])

  • state：当前VueX对象中的状态对象

  • getters：当前getters对象，用于将getters下的其他getter拿来用

在getters中自定义方法
复制代码 
getters:{
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
}
在组件中调用该方法
复制代码 
this.$store.getters.fullInfo

2.4 Actions---异步操作

mutations只能处理同步函数，直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。actions和mutations的区别：
Actions提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下。

Actions中的方法有两个默认参数：([context] , [payload])

context：上下文(相当于箭头函数中的this)对象
payload：挂载参数

在actions中自定义异步方法：如在两秒中后执行edit方法（由于setTimeout是异步操作，所以需要使用actions）。
复制代码 
actions:{
    edit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}
在组件中调用该异步方法
复制代码 
this.$store.dispatch('edit',{age:15})

拓展：由于是异步操作，所以我们可以对异步操作封装为一个Promise对象，上面的异步方法可优化为：

复制代码 
actions:{
    edit(context,payload){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                context.commit('edit',payload)
                resolve()
            },2000)
        })
    }
}

2.5 Modules

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块------从上至下进行同样方式的分割。
复制代码 
Modules :{
    a:{
        state:{},
        getters:{},
        ....
    }
}

组件内调用模块a的状态：

复制代码 
this.$store.state.a

而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法：

复制代码 
this.$store.commit('editKey')
this.$store.dispatch('aEditKey')

2.5.1 模块的细节

模块中 mutations和getters中的方法接受的第一个参数是自身局部模块内部的state

复制代码 
Modules :{
    a:{
        state:{key:5},
        mutations:{
            editKey(state){
                state.key = 9
            }
        },
        ....
    }
}

  • getters中方法的第三个参数是根节点状态

    Modules :{
    a:{
    state:{key:5},
    getters:{
    getKeyCount(state,getter,rootState){
    return rootState.key + state.key
    }
    },
    ....
    }
    }

actions中方法获取局部模块状态是context.state,根节点状态是context.rootState

复制代码 
Modules :{
    a:{
        state:{key:5},
        actions:{
            aEidtKey(context){
                if(context.state.key === context.rootState.key){
                    context.commit('editKey')
                }
            }
        },
        ....
    }
}

三、规范目录结构

如果把整个store都放在index.js中是不合理的，所以需要拆分。比较合适的目录格式如下：

复制代码 
store:.
│  actions.js
│  getters.js
│  index.js
│  mutations.js
│  mutations_type.js   ##该项为存放mutaions方法常量的文件，按需要可加入
│
└─modules
        Astore.js

对应的内容存放在对应的文件中，和以前一样，在index.js中存放并导出store。state中的数据尽量放在index.js中。而modules中的Astore局部模块状态如果多的话也可以进行细分。
© 著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务

喜欢的朋友记得点赞、收藏、关注哦！！！

相关推荐
季明洵2 分钟前
Java简介与安装
java·开发语言
沉鱼.445 分钟前
枚举问题集
java·数据结构·算法
daad7775 分钟前
bitcoin HD钱包示例 真实使命7
运维·服务器
Java面试题总结8 分钟前
htop安装不了怎么解决
mysql
林夕sama9 分钟前
多线程基础（五）
java·开发语言·前端
Zzxy13 分钟前
HikariCP连接池
java·数据库
钰衡大师14 分钟前
MySQL 数据库备份方案
数据库·mysql
罗超驿17 分钟前
Java数据结构_栈_算法题
java·数据结构·栈
谁在黄金彼岸19 分钟前
Spring Boot + WebFlux 全面使用指南
spring boot
Zero-Talent22 分钟前
TCP/IP协议
运维·服务器·网络
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03围棋-html版本04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06OpenClaw 使用和管理 MCP 完全指南07OpenClaw Control UI安全上下文访问配置08AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南09UV安装并设置国内源10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）