vuex
状态管理库 Vuex
核心 state ( 数据 )
核心 mutations ( 变化 )
核心 getters ( 获取 )
核心 actions ( 异步操作 )
核心 modules ( 模块 )
1、 Vuex状态管理库
他是一个Vue的插件,主要用处状态( 数据 )的管理
作用:
- 多组件的数据共享
- 祖先传递数据给后代,层级非常深
1.1 核心State
作用: 用于定义共享的数据
定义共享的数据:
// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
// 状态 (数据)
state: {
// 在里面定义你需要共享的数据
num:100,
shopCar:[
{ id:1,name:'苹果',price:10,count:3},
{ id:2,name:'橘子',price:4,count:100},
{ id:3,name:'香蕉',price:10,count:20},
]
}
})
使用共享数据:
方法1:直接使用
<template>
<div>{{ 函数名 }} </div>
</template>
export default {
computed:{
函数名(){
return this.$store.state.变量
}
}
};
方法2:辅助函数使用
// map 映射 mapState 映射仓库里State一一对应
import { mapState } from 'vuex'
export default {
computed:{
// 辅助函数数组写法 需要一一对应
...mapState(['仓库值','仓库值1']) //强烈推荐
// 辅助函数对象写法 可以帮助我们解决冲突,并可以处理一次数据
...mapState({
变量:state=>state.仓库值 * 7,
变量1:state=>state.仓库值1,
})
}
};
1.2 核心Mutations
是当前仓库中,修改数据(state)的唯一方式,如果你要修改数据,必须提交一个mutations
// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
// 状态 (数据)
state: {
// 在里面定义你需要共享的数据
shopCar:[]
},
// 修改 们
mutations:{
// 函数名字母为大写
函数名(state,payload){ // state就是状态 payload 传入的参数
state.shopCar = payload // 就相当于将传入的参数赋值给仓库里的数据
}
}
})
如何修改数据:
方法1: 直接修改数据
this.$store.commit('函数名',实参)
this.$store.commit({ type:'函数名', 实参 }) //了解
方法2: 辅助函数修改数据
import { mapMutations } from 'vuex'
export default {
methods:{
// 辅助函数数组写法
...mapMutations(['函数名']),
// 辅助函数对象写法
...mapMutaions({
键名:'函数名'
})
}
};
1.3 核心Getters
就相当于vuex里的计算属性,对数据进行二次处理,返回一个最终可以直接使用的结果
// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
// 状态 (数据)
state: {
// 在里面定义你需要共享的数据
num:100,
shopCar:[
{ id:1,name:'苹果',price:10,count:3},
{ id:2,name:'橘子',price:4,count:100},
{ id:3,name:'香蕉',price:10,count:20},
]
},
getters: {
函数名1(state){
// 对原始数据进行一堆处理
return 最终结果
}
}
})
使用:
方法1:直接使用
<template>
<div>{{ 函数名 }} </div>
</template>
export default {
computed:{
函数名(){
return this.$store.getters.函数名1
}
}
};
方法2:辅助函数使用
// map 映射 mapGetters 映射仓库里Getters 一一对应
import { mapGetters } from 'vuex'
export default {
computed:{
// 辅助函数数组写法 需要一一对应
...mapGetters(['函数名1','函数名2']) //强烈推荐
}
};
1.4 核心Actions
用于异步处理,如果需要异步修改出具,放在actions,但是最后修改数据由mutations完成
// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
// 状态 (数据)
state: {
// 在里面定义你需要共享的数据
shopCar:[]
},
// 修改 们
mutations:{
// 函数名字母为大写
SET_SHOP_CAR(state,payload){ // state就是状态 payload 传入的参数
state.shopCar = payload // 就相当于将传入的参数赋值给仓库里的数据
}
},
actions:{
// context 相当于整个vue实例 $store
函数名(context,payload){
一堆异步操作
setTimeout(()=>{
// 修改数据
context.commit('SET_SHOP_CAR',修改的数据)
},1000)
}
}
})
使用方法: dispatch
方法1: 直接异步修改数据
this.$store.dispatch('函数名',实参)
this.$store.dispatch({ type:'函数名', 实参 }) //了解
方法2: 辅助函数异步修改数据
import { mapActions } from 'vuex'
export default {
methods:{
// 辅助函数数组写法
...mapActions(['函数名']),
// 辅助函数对象写法
...mapActions({
键名:'函数名'
})
}
};
1.5 核心modules [理解]
拆分仓库,解决命名冲突,每个仓库里都有自己的state,mutations,getters,actions
// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
// 核心模块 们
modules:{
// 第一模块
firstModule:{
namespaced:true, // 命名空间
state:{num:1000},
actions:{},
getters:{},
mutations:{}
},
// 第二模块
secondModule:{
namespaced:true, // 命名空间
state:{num:1},
actions:{},
getters:{},
mutations:{}
}
},
})
使用
this.$store.模块名.变量名