当前位置: 首页 > article >正文

Vuex知识点总结

1、什么是Vuex?

  • 定义Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式库

  • 作用:解决组件间状态共享的问题,避免多层嵌套传参的复杂性

  • 核心集中管理应用的所有组件状态

2、什么时候用Vuex? 

  • 适用场景

    • 中大型单页应用(SPA)

    • 多个组件需要共享状态

    • 组件间通信复杂

  • 不适用场景

    • 简单的小型应用

    • 状态管理需求不复杂

3、怎么用Vuex?

1)安装vuex依赖
npm install vuex --save
2)导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
3)创建store对象
const store = new Vuex.Store({
    // state 中存放全局共享的数据
    state: {count:0}
})
4)store对象挂载到vue实例中
new Vue({
	el: '#app',
	render: h=>h(app),
	router,
	// 创建的共享数据挂载到vue实例
	// 所有组件能够直接从store中获取到全局的数据
	store
})

4、Vuex的核心概念

1)State(状态仓库)
  • 存储全局共享的响应式数据,类似组件中的 data ,所有组件可通过 this.$store.state  访问

 // 创建store数据源,提供唯一公共数据
 const store = new Vuex.Store({
 	state: { count: 0 }
 })

// 直接访问 
this.$store.state.count   


// 把State全局域中的数据映射为我当前组件的计算属性
computed: {
  ...mapState(['count'])
}
 2)Mutations(同步修改)
  • 唯一允许修改 state 的方式,必须是同步操作,通过 commit 触发,便于追踪状态变更

mutations: {  
  SET_USER(state, newUser) { state.user = newUser }  
}  
// 触发:this.$store.commit('SET_USER', data)  
3)Actions(异步操作)
  • 处理异步逻辑(如 API 请求),通过 dispatch 触发,最终调用 mutations ,支持 Promise 链式调用

    actions: {  
      async fetchUser({ commit }, userId) {  
        const res = await axios.get(`/api/users/${userId}`) 
        commit('SET_USER', res.data) 
      }  
    }  
    // 触发:this.$store.dispatch('fetchUser', userId) 
4)Getters(计算属性)
  • state派生出新状态,类似组件的 computed ,支持缓存和动态计算

    getters: {  
      totalPrice: (state) => state.cartItems.reduce((sum, item) => sum + item.price, 0)  
    }  
    // 调用:this.$store.getters.totalPrice  
5)Modules(模块化) 
  • 将大型应用的状态(Store)分割为模块,每个模块独立管理。每个模块拥有自己的 state、mutations、actions、getters

    const moduleA = {
      state: {},
      mutations: {},
      actions: {},
      getters: {}
    }
    
    const store = createStore({
      modules: {
        a: moduleA
      }
    })
    
Vuex 的注意事项
  • 状态修改:只能通过 mutations 或 actions 修改状态,不能直接修改 state

  • 异步操作:在 actions 中处理异步操作,再提交 mutations

  • 模块化:对于大型应用,使用模块化管理状态

总结:Vuex 是 Vue 应用程序中管理状态的重要工具,通过集中式状态管理解决了复杂应用的组件通信难题,其核心在于 ​单向数据流 和 ​严格的状态变更规则


http://www.kler.cn/a/590441.html

相关文章:

  • Unity AI 技术浅析(三):智能代理(Agents)
  • 设计模式学习记录
  • EF框架数据库更新后自动更新类及上下文
  • 【计量地理学】实验一 地理数据的基本统计分析
  • wow-rag学习|搞定模型
  • FPGA中级项目1——IP核(ROM 与 RAM)
  • 浏览器文件操作API
  • 深度学习处理时间序列(2)
  • 架构师面试(十七):总体架构
  • 使用vite脚手架搭建react项目
  • Linux查找tomcat的路径
  • 【leetcode hot 100 437】路径总和Ⅲ
  • CC44.【C++ Cont】哈希表的模拟实现
  • 利用github部署项目
  • 跨平台直播美颜SDK开发指南:如何兼容iOS、Android与Web
  • (笔记)Ubuntu 20编译Linux 4.19.262内核
  • Java创造型模式之原型模式详解
  • 基于 Docker 和 Flask 构建高并发微服务架构
  • uni-app+SpringBoot: 前端传参,后端如何接收参数
  • 解决git init 命令不显示.git