百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

一文让你彻底搞懂 vuex，满满的干货

ztj100 2025-03-06 22:08 7 浏览 0 评论

本篇文章，内容比较多，建议收藏！

官方解释：Vuex 是专为 vue.js 应用程序开发的状态管理模式。

一、Vuex 是做什么呢？

什么是状态管理？

简单地讲：可以把多个组件都需要的变量全部存储到一个对象里面，然后这个对象放在顶层的 vue 实例中，让其他组件可以使用。这样多个组件就可以共享这个对象中的所有属性。

有些同学想着，这么简单我们自己在vue顶层定义一个对象不就可以实现共享了？我们发现虽然数据可以获取到，但是如果在某个组件内，数据改变了，那我们如何修改数据，让此数据在其他组件内保持最新呢？

我们的vuex就是为了提供一个在多个组件间共享状态的插件，而且能够实现实时响应。

二、Vuex 使用

vuex 是管理组件之间通信的一个插件，所以使用之前必须安装。

2.1、安装

1》使用 script 方式引入

<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

2》使用包管理

npm install vuex --save //yarn add vuex

注意：vuex 必须依赖 vue 使用

2.2、搭建 store 实例

创建一个 store 文件夹，新建 index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);//使用vuex

export default new Vuex.Store({
	state:{},
  mutations:{},
  getters:{},
  actions:{},
  modules:{}
})

在 main.js 处，挂载 store

import store from './store'

new Vue({
 router,
 render: h=>h(App)
})

//相当于
// Vue.prototype.$store = store

2.3、使用状态

// store 中定义状态
state:{
	statue: '在线'
}

//在组件内使用

组件内数据：{{ $store.state.status }} 

//在 js 中使用
mounted(){
	console.log( this.$store.state.status )
}

三、Vuex 的五大核心

3.1、state

state 存放 vuex 的基本数据，用来存储变量的。

单一状态树

Vuex 使用单一状态树，即用一个对象就包含了全部的状态数据。state 作为构造器选项，定义了所有我们需要的基本状态参数。

在组件中引用 state 数据方式：

1》通过 vue 的 computed 获取 vuex 的 state

export default new Vuex.Store({
 state:{
  online:true
 }
})


computed:{
 status(){
  return this.$store.state.online
 }
}

store 中的数据发生改变时，都会重新求取计算属性，并更新相关 DOM。

2》如果需要使用多个参数时，都使用 computed 计算属性，就会使代码变的有些冗余和复杂，此时我们就可以借助 mapState 辅助函数。

//state 中数据比较多，引用到一个组件内
export default new Vuex.Store({
 state:{
  online:true,
   per:[
    {name:'qq',age:18}
   ],
  role:'管理员'
 }
})

//组件内
import { mapState } from 'vuex'

export default {
  name: 'App',
  computed: mapState({
   online: state => state.online,
    per: 'per', // 'per'就相当于 state.per
    role: 'role' // 'role'就相当于 state.role
  })
}

vuex 使用单一状态树来管理应用层级的全部状态，单一状态树能够让我们最直接的方式找到某个状态的片段，而且之后的维护和调试过程，也可以非常方便管理和维护。

3.2、getters

从 store 中获取一些 state 变异后的状态。

使用的时候一般有两种方式：

1》返回的结果只依赖于 state 中的数据

export default new Vuex.Store({
 state:{
  count:2,
 },
 getters:{
   //返回 count 的 2 倍数据
  countDouble(state){
   return state.count*2
  }
 }
})

//组件中引用

 获取countDouble：{{ $store.getters.countDouble }} 

//运行结果
获取countDouble：4

此处，$store.getters.countDouble 的使用与上边的 $store.state.count 是一样的。

2》getters 中返回的变异结果，依赖于某个 getters 中属性返回结果

export default new Vuex.Store({
 state:{
  count:2,
 },
 getters:{
   //返回 count 的 2 倍数据
  countDouble( state ){
   return state.count * 2
  }
   //返回 countDouble 的 2 倍数据
   countDoubleT( state , getters ){
    return getters.countDouble * 2
   }
 }
})

//组件中引用

 获取countDouble：{{ $store.getters.countDoubleT }} 

//运行结果
获取countDouble：8

3.3、mutations

vuex 的store 状态的更新唯一方式：提交 Mutation。

Mutations 主要包括两部分：

  • 字符串的事件类型
  • 一个回调函数，该回调函数的第一个参数就是 state。

1》、mutation 中的方法通过 commit 调用，不传参数使用：

export default new Vuex.Store({
 state:{
  count:2,
 },
 mutations:{
  incrs(state){
   // count 加 1 
   state.count++
  }
 }
})

//组件调用


{{$store.state.count}}

按钮每点一次，count 就会自加一次。

2》mutations 传递参数

我们点击加按钮时，指定每次点击增加的数值，如下：

export default new Vuex.Store({
 state:{
  count:2,
 },
 mutations:{
  addNum( state,n ){
   // count 加 1 
   state.count +=n
  }
 }
})

//组件调用


{{$store.state.count}}

//运行结果
每点一次按钮，count 增加 5

上个实例传递的是一个参数，如果我们需要传递多个参数时，该如何实现呢？

3》mutations 传递多个参数

export default new Vuex.Store({
 state:{
  count:2,
 },
 mutations:{
  addNum(state,payload){
    // payload 是传递过来的参数对象
    state.count += payload.count
  }
 }
})

//组件调用


{{$store.state.count}}
export default{
methods:{
 addTen(){
  this.$store.commit({
    type:'addNum',
     count:10,
   		...//可以传任意多个参数
    })
  }
 }
}
//运行结果
每点一次按钮，count 增加 10

上述方法是 mutations 特殊的提交封装。包含了 type 属性的对象，将整个 commit 的对象作为 payload 使用。

3.4、actions

mutations 提交更新数据的方法，必须是同步的，如果是异步使用就会出现问题，然后在项目开发中往往就会用到异步更新，比如网路请求数据。

actions 是类似于 mutation，功能大致相同，但是 actions 是用来替代 mutations 进行异步操作的。

1》actions 的基本使用

actions:{
 aUpdateCount(context){
  setTimeout(()=>{ //使用定时器模拟异步操作
   context.commit('updateCount')
  },2000)
 }
},
mutations:{
 updateCount(state){
  state.count = 5201314
 },
}

// 组件内使用
{{$store.state.count}}


//运行结果
点击按钮，两秒后更新 count 值为5201314

值得注意的是，使用 actions 异步更新数据的时候，还是需要经过 mutations 中的方法，state 中的数据只能由 mutations 中的方法修改。

调用 mutations 中的方法，使用 commit 调用。

调用 actions 中的方法，使用 dispatch 调用。

2》异步更新的时候，也可以带参数

// 功能：点击按钮，指定 count 修改的值
actions:{
 aUpdateCount( context, payload ){
  setTimeout(()=>{ //使用定时器模拟异步操作
   context.commit( 'updateCount' , payload )
  },2000)
 }
},
mutations:{
 updateCount( state , payload ){
  state.count = payload
 },
}

// 组件内使用
{{$store.state.count}}


//运行结果
点击按钮，两秒后更新 count 值为: 我爱前端

3》传入异步参数

actions:{
 //传入promise
 updateData(context,payload){
  return new Promise((resolve,reject)=>{
   setTimeout(()=>{
    resolve('我学会了')
   },2000)
  })
 },
}

//组件内调用

methods:{
 ok(){
  this.$store.dispatch('updateData').then((res)=>{
   console.log(res)
  })
 },
}

//运行结果
点击按钮，两秒后打印：我学会了

3.5、modules

modules 是模块的意思，vue 使用单一状态树，项目越来越大，store 中的数据越来越多，不便于数据的管理和维护，代码也会变得臃肿。因此使用 modules ，把数据划分到对应的某个模块，既便于开发，也提高代码的可读性。

1》modules 简单使用

import Vue from 'vue'
import Vuex from 'vuex'
import { Increase } from './mutation_type.js'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  actions: {},
  getters: { },
  mutations: { },
  modules:{
    a:{
      state:{},
      getters:{},
      mutations:{},
      actions:{}
    },
    b:{
      state:{},
      getters:{},
      mutations:{},
      actions:{}
    }
  },
})

//也可以整理为
const moduleA = {
  state:{},
  getters:{},
  mutations:{},
  actions:{}
}
const moduleB = {
  state:{},
  getters:{},
  mutations:{},
  actions:{}
}
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  actions: {},
  getters: { },
  mutations: { },
  modules:{
    a: moduleA,
    b: moduleB
  },
})

2》模块中的数据如何使用呢？

const moduleA = {
  state:{
    aName:'我是模块a的数据'
  },
  getters:{},
  mutations:{},
  actions:{}
}

// 组件内引用
{{ $store.state.a.aName }}

3》调用模块内的 mutations 中的方法，如何调用呢？

$store.commit('aChangeName')

调取模块内的 mutations 中的方法，与之前是一模一样的，程序会先从第一层 store 中查找方法，找不到方法时会继续去模块中查找。

4》调用模块内的 getters 内方法

$store.getters.getName

需要注意的是，getters 中方法都是对 state 中数据变异，如果模块的 getters 方法需要根 store 中的 state 呢？

getName(state，getters , rootState){
  // state 表示当前模块的 state
  // getters表示当前模块的getters
  //rootState 表示根 store 内的state
}

5》模块内的 actions 中的方法，使用 commit 调用 mutations 中方法时，只能调用本模块内的 mutations 方法，不能调用外层的。

四、Vuex 数据响应原理

Vuex 的 store 中的 state 是响应式的，当 state 中数据发生改变时，vue 组件会自动更新。这就要求我们必须遵守一些vuex对应的规则：

提前在 store 中初始化好所需的属性。

说人话，就是必须在state中定义的属性才能做到响应式，如果是后加或删除的，无法做到响应式。

举个栗子：

mutations:{
 changeName(state){
  state.info.name = '爱学习的前端人'
 },
 addAdrs(state){
  state.info['address'] = "陕西西安"
 },
}
      
{{this.$store.state.info}}

此时点击修改姓名的时候，可以做到响应式，而点击“增加地址”按钮时，页面没有任何反应，但是在开发者模式中可以看到数据有变化。

我们要响应式，该如何实现呢？

addAdrs(state){
 
  state.info['address'] = "陕西西安"
  
  //修改为：
  Vue.set(state.info,'address','陕西西安')  
  
 },

同样的如果要删除 age 属性时，使用 delete 也做不到响应式，需要修改为 Vue.delete。

实例：响应式删除 age 属性

deleteAge(state){
  
 //delete state.info.age
  
 //修改为 	
 Vue.delete(state.info,'age')
},
 
//组件内容
{{this.$store.state.info}}

五、类型常量

在 mutation 中定义很多事件类型，也就是方法名。当项目越来越大时，Vuex 管理的状态越来越多，需要更新状态的情况越来越多，那么意为着 Mutations 中的方法名越来越多，方法过多时，使用的时候需要花费大量精力去记住或来回切换文件找方法名，这样很容易出错，所以推荐大家使用一个常量，即使方法名出错了，也会将错就错，程序并不会发生异常。

如：

// 新建 mutation_type.js 文件
//导出一个常量
export const Increase = 'increase'

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import { Increase } from './mutation_type.js'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    count:2,
  },
  mutations:{
    [Increase](state){
      state.count++
    },
  }
})

//组件内容
{{ $store.state.count }}
 
import { Increase } from './store/mutation_type'
sxport default{
	methods:{
   add(){
   	this.$store.commit(Increase)
   }
  }
}

使用的时候，只需要记住 Increase 或者在 mutation_type.js 文件内查找就好了。

好了小编今天的文章就到此结束了，喜欢我的可以点个关注哦！

相关推荐

使用 Pinia ORM 管理 Vue 中的状态

转载说明：原创不易，未经授权，谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术，但随着应用程序复杂性的增加，处理状态可能变得更具挑战性。这就是为什么...

Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码

Vue3开发企业级音乐WebApp明星讲师带你学习大厂高质量代码下栽课》jzit.top/392/...

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。...

超赞 vue2/3 可视化打印设计VuePluginPrint

今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...

搭建Trae+Vue3的AI开发环境（vue3 ts开发）

从2024年2025年，不断的有各种AI工具会在自媒体中火起来，号称各种效率王炸，而在AI是否会替代打工人的话题中，程序员又首当其冲。...

如何在现有的Vue项目中嵌入 Blazor项目?

...

Vue中mixin怎么理解?（vue的mixins有什么用）

作者：qdmryt转发链接：https://mp.weixin.qq.com/s/JHF3oIGSTnRegpvE6GSZhg前言...

Vue脚手架安装，初始化项目，打包并用Tomcat和Nginx部署

1.创建Vue脚手架#1.在本地文件目录创建my-first-vue文件夹，安装vue-cli脚手架:npminstall-gvue-cli安装过程如下图所示：创建my-first-vue...

新手如何搭建个人网站（小白如何搭建个人网站）

ElementUl是饿了么前端团队推出的桌面端UI框架，具有是简洁、直观、强悍和低学习成本等优势，非常适合初学者使用。因此，本次项目使用ElementUI框架来完成个人博客的主体开发，欢迎大家讨论...

零基础入门vue开发（vue快速入门与实战开发）

上面一节我们已经成功的安装了nodejs，并且配置了npm的全局环境变量，那么这一节我们就来正式的安装vue-cli，然后在webstorm开发者工具里运行我们的vue项目。这一节有两种创建vue项目...

.net core集成vue（.net core集成vue3）

react、angular、vue你更熟悉哪个？下边这个是vue的。要求需要你的计算机安装有o.netcore2.0以上版本onode、webpack、vue-cli、vue（npm...

使用 Vue 脚手架，为什么要学 webpack?(一)

先问大家一个很简单的问题：vueinitwebpackprjectName与vuecreateprojectName有什么区别呢？它们是Vue-cli2和Vue-cli3创建...

vue 构建和部署（vue项目部署服务器）

普通的搭建方式（安装指令）安装Node.js检查node是否已安装，终端输入node-v会使用命令行（安装）npminstallvue-cli-首先安装vue-clivueinitwe...

Vue.js 环境配置（vue的环境搭建）

说明：node.js和vue.js的关系：Node.js是一个基于ChromeV8引擎的JavaScript运行时环境；类比：Java的jvm(虚拟机)...

vue项目完整搭建步骤（vuecli项目搭建）

简介为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.