前端自学学习笔记——Vuex

最新推荐文章于 2025-04-11 19:11:11 发布

Hoki802

最新推荐文章于 2025-04-11 19:11:11 发布

阅读量180

点赞数 1

分类专栏： Vue 文章标签：前端学习 vue.js

本文链接：https://blog.youkuaiyun.com/cloki/article/details/124907922

版权

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Vuex在前端开发中的作用，包括集中式管理状态、组件间通信、核心配置如state、mutations、actions和getters的使用，以及如何通过map方法简化代码。此外，还探讨了Vuex的模块化和命名空间特性，帮助提升代码的可维护性和数据处理效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端自学学习笔记——Vuex

文章目录

前端自学学习笔记——Vuex

1. Vuex简介

概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

注：集中管理共享的数据，且存储在vuex中的数据是响应式的，能实现实时保持数据与页面同步。
使用场景：①多个组件依赖于同一状态；②来自不同组件的行为需要变更同一状态。
工作原理图：
基本使用：
1. 安装vuex依赖包
2. 导入vuex包
3. 创建各配置项
4. 创建store对象并暴露各配置项出去

2. Vuex环境搭建

下载安装vuex：npm install vuex
创建文件：src/store/index.js，该文件用于创建vuex中最核心的store

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
   
//创建并暴露store
export default new Vuex.Store({
   	actions,
   	mutations,
   	state
})

在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......
   
//创建vm
new Vue({
   el:'#app',
   render: h => h(App),
   store
})

3. Vuex配置项

3.1 state

提供唯一的共数据源，所有共享数据统一存放在store的state中。

定义：

   //初始化数据
   const state = {
      sum:0
   }
   //创建并暴露store
   export default new Vuex.Store({
   	state,
   	.....
   })

组件访问state中的数据：

方法一：this.$store.state.全局变量名称

方法二：通过 mapState方法将当前组件需要的全局数据，映射为当前组件的computed计算属性。

3.2 mutations

用于变更store中的数据，通过这种方式可以集中监控所有数据的变化。

注：只能通过mutations变更store数据，不能直接操作store中的数据。

定义：

   const mutations = {
       //执行加
   	JIA(state,value){
   		// console.log('mutations中的JIA被调用了',state,value)
   		state.sum += value
   	}
   }
   //创建并暴露store
   export default new Vuex.Store({
   	  mutations,
   	  .....
   })

触发mutations： $store.commit('mutations中的方法名',数据)

3.3 actions

用于处理异步任务，若想通过异步操作变更数据，必须通过actions，不能通过mutations，但在actions中还是要触发mutation的方式间接变更数据。

定义：

   const actions = {
       //响应组件中加的动作
   	jia(context,value){
   		// console.log('actions中的jia被调用了',miniStore,value)
   		context.commit('JIA',value)
   	},
   }

触发actions：$store.dispatch('action中的方法名',数据)

3.4 getter

用于对store中的数据进行加工处理形成新的数据。

即getter不会修改store中的数据，只起到包装的作用，将store中的数据变一种形式然后返回出来。

注：store中数据变化，getter的数据也会跟着变化。

定义：

   ......
   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	......
   	getters
   })

组件中读取数据：$store.getters.bigSum

4. 四个map方法的使用

4.1 mapState方法

用于帮助我们映射state中的数据为计算属性

computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },

4.1 mapGetters方法

用于帮助我们映射getters中的数据为计算属性

computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },

4.1 mapMutations方法

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

 methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（对象形式）
       ...mapMutations(['JIA','JIAN']),
   }

4.1 mapActions方法

用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

5. 模块化 + 命名空间

目的：让代码更好维护，让多种数据分类更加明确。

修改store.js

const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })

开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

如果觉得对你有帮助的话，点个赞呗~

如需转载，请注明出处Hoki802