1.vuex是什么?概念
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。当多个组件需要共享数据时使用vuex。

2.搭建vuex环境
1.创建文件:src/store/index.js
| |
| import Vue from 'vue' |
| |
| import Vuex from 'vuex' |
| |
| Vue.use(Vuex) |
| |
| |
| const actions = {} |
| |
| const mutations = {} |
| |
| const state = {} |
| |
| |
| export default new Vuex.Store({ |
| actions, |
| mutations, |
| state |
| }) |
2.在main.js中创建vm时传入store配置项
| ...... |
| |
| import store from './store' |
| ...... |
| |
| |
| new Vue({ |
| el:'#app', |
| render: h => h(App), |
| store |
| }) |
3.基本使用
1.初始化数据、配置actions、配置mutations,操作文件store.js
| |
| import Vue from 'vue' |
| |
| import Vuex from 'vuex' |
| |
| Vue.use(Vuex) |
| |
| const actions = { |
| |
| jia(context,value){ |
| |
| context.commit('JIA',value) |
| }, |
| } |
| |
| const mutations = { |
| |
| JIA(state,value){ |
| |
| state.sum += value |
| } |
| } |
| |
| |
| const state = { |
| sum:0 |
| } |
| |
| |
| export default new Vuex.Store({ |
| actions, |
| mutations, |
| state, |
| }) |
2.组件中读取vuex中的数据:$store.state.sum
3.组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit
4.getters的使用
1.概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
2.在store.js中追加getters配置
| ...... |
| |
| const getters = { |
| bigSum(state){ |
| return state.sum * 10 |
| } |
| } |
| |
| |
| export default new Vuex.Store({ |
| ...... |
| getters |
| }) |
3.组件中读取数据:$store.getters.bigSum
5.四个map方法的使用
1.mapState方法:用于帮助我们映射state中的数据为计算属性
| computed: { |
| //借助mapState生成计算属性:sum、school、subject(对象写法) |
| ...mapState({sum:'sum',school:'school',subject:'subject'}), |
| |
| //借助mapState生成计算属性:sum、school、subject(数组写法) |
| ...mapState(['sum','school','subject']), |
| }, |
2.mapGetters方法:用于帮助我们映射getters中的数据为计算属性
| computed: { |
| //借助mapGetters生成计算属性:bigSum(对象写法) |
| ...mapGetters({bigSum:'bigSum'}), |
| |
| //借助mapGetters生成计算属性:bigSum(数组写法) |
| ...mapGetters(['bigSum']) |
| }, |
3.mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数
| methods:{ |
| //靠mapActions生成:incrementOdd、incrementWait(对象形式) |
| ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) |
| |
| //靠mapActions生成:incrementOdd、incrementWait(数组形式) |
| ...mapActions(['jiaOdd','jiaWait']) |
| } |
4.mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数
| methods:{ |
| //靠mapActions生成:increment、decrement(对象形式) |
| ...mapMutations({increment:'JIA',decrement:'JIAN'}), |
| |
| //靠mapMutations生成:JIA、JIAN(对象形式) |
| ...mapMutations(['JIA','JIAN']), |
| } |
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
7.模块化+命名空间
1. 目的:让代码更好维护,让多种数据分类更加明确。
2. 修改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 |
| } |
| }) |
3. 开启命名空间后,组件中读取state数据:
| |
| this.$store.state.personAbout.list |
| |
| ...mapState('countAbout',['sum','school','subject']), |
4. 开启命名空间后,组件中读取getters数据:
| |
| this.$store.getters['personAbout/firstPersonName'] |
| |
| ...mapGetters('countAbout',['bigSum']) |
5. 开启命名空间后,组件中调用dispatch
| |
| this.$store.dispatch('personAbout/addPersonWang',person) |
| |
| ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) |
6. 开启命名空间后,组件中调用commit
| |
| this.$store.commit('personAbout/ADD_PERSON',person) |
| |
| ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}), |
©摘自尚硅谷张天禹Vue2.0+Vue3.0全套教程丨vuex章节课件
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器