「这是我参与11月更文挑战的第6天,活动详情查看:2021最后一次更文挑战」
前言
大家好,我是cv竹叶,相信做过vue项目的大家,一定见过vuex
,今天就让我们来看看vuex到底是什么叭~
vuex
vuex的介绍
vuex
是vue.js
应用程序中的状态管理模式
,它是集中式存储管理所有组件的数据状态,vuex解决了多个视图之间的数据交互同步,不需要进行组件连接再传递数据。
vuex的5大模块
state
:用于数据的存储,是store中的唯一数据源
const state = {
// 初始化两个组件的数据源,用于操作
A: '',
B: ''
}
复制代码
getters:
是一种计算属性,对state数据进行操作,常用于数据的筛选和多个数据的相关性计算
//定义
getters: {
filteredList: state => {
return state.list.filter(item => item > 5)
}
}
//调用
this.$store.getters.filteredList;
复制代码
mutations
:是一种函数集合的对象,用于在里面改变state数据,但不能用于处理异步事件
const mutations = {
receiveA(state, datas) {
// 接收A的数据存放于state
state.A = datas.A
},
receiveB(state, datas) {
// 接收B的数据存放于state
state.B = datas.B
}
}
//调用mutations的方法,用commit触发
this.$store.commit('receiveA', {
A: '我是A'
})
复制代码
actions
:类似于mutation
,用于提交mutation
来改变状态,而不直接变更状态,可以包含任意异步操作
const actions = {
setNum(content){ //复制的一份store
return new Promise((resolve)=>{//异步操作
setTimeout(()=>{
console.log('改变状态')
resolve()
},1000)
})
}
}
//调用actions,用dispatch触发
this.$store.dispatch('setNum')
//actions使用dispatch进行触发,就像mutation使用commit触发一样
复制代码
modules
:vuex中的命名空间,便于维护项目中将各个模块的状态分开定义和操作
vuex示例代码:
const store = new Vuex.Store({
state:{
// 初始化两个组件的数据源,用于操作
A: '',
B: ''
},
getters: {
filteredList: state => {
return state.list.filter(item => item > 5)//过滤小于5的值
}
},
mutations:{
receiveA(state, datas) {
// 接收A的数据存放于state
state.A = datas.A
},
receiveB(state, datas) {
// 接收B的数据存放于state
state.B = datas.B
}
},
actions:{
setNum(content){ //复制的一份store
return new Promise((resolve)=>{//异步操作
setTimeout(()=>{
console.log('进行改变状态操作')
resolve()
},1000)
})
}
}
})
复制代码
vuex运用场景
- 页面与页面之间产生各种公共变量。
- 页面头部组件下,购物数量显示。
- 全局变量也可以用vuex来存储。
结言
现在理解vuex了叭,主要就是这几点,学会了工作中也有帮助,觉得对你有用,就点赞叭~