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来存储。