VueX
1、定义:
vuex 是专门在vue中实现 集中式 状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态(数据)进行集中式的管理(读/写/改等操作),也是一组组件通信的方式,且适用于任意组件间的通信
全局事件总线实现多组件数据共享的方式
使用vuex实现多组件共享数据的方式
Vuex的结构
2、什么时候使用vuex:
多个不同组件需要共享使用同一状态(数据)的时候
-
搭建vuex环境
a、安装vuex npm i vuex@3 (vue2 使用版本3,vue3使用版本4)
b、创建文件:src/store/index.js
const actions = {}
const mutations = {}
const state = {}
c、在main.js中创建vm时,传入store配置项
-
基本使用
a、初始化数据(在state里),配置actions、配置mutations、操作文件store.js
b、组件中读取vuex中的数据:$store.state.sum
c、组件中修改vuex中的数据:$store.dispatch(‘actions中的方法名’,数据)
或$store.commit(‘mutation中的方法名’,数据)
备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit
getters相当于计算属性,对state数据进行计算(根据不同的业务场景)
mapState 和mapGetters
对state和getters的数据进行映射为计算属性
mapMutations和mapActions
多组件共享数据
Vuex模块化+命名空间
优点:使用模块化可以让代码更好的维护,让不同的状态(数据)以不同的分类模块进行处理,同时在开发过程中,不同模块的分开开发,有利于项目的高效开发
实现方法:
在store.js中
创建一个模块,将vuex的方法放到该模块中去,同时开启命名空间
const xxxx(模块名) = {
namespaced: true, //开启命名空间
state:{...},
mutations:{...},
actions:{....},
getters:{....}
}
const store = new Vuex.Store({
modules:{
xxxx(模块名),
}
})vue