1.0 Vuex 状态管理库
Vuex是一个Vue的插件,用于管理状态( 数据 )
Vuex作用场景:
-
祖先组件向子孙组件传递数据,层级非常深
-
多个组件间的数据共享
Vue的核心功能
核心State
用于注册、存放数据的仓库
export default new Vuex.Store({
// 存储状态(数据)
state: {
num: 250,
goods: [
],
// 白马会员列表
whiteHorseVip: [
{ name: '凯子哥', age: 24 },
{ name: '黄子姐', age: 22 },
{ name: '维子哥', age: 26 },
{ name: '俊子哥', age: 18 }
]
}
})
1、直接获取仓库的数据
<template>
<div>
<div>num:{{ $store.state.num }}</div>
<div>
goods:
<p v-for="item in $store.state.goods"
:key="item.name"
>{{ item.name }} --{{ item.price*item.count }}</p>
</div>
</div>
</template>
<script>
export default {
created() {
console.log(this.$store.state.num);
},
// 推荐
computed: {
num() {
return this.$store.state.num;
},
goods() {
return this.$store.state.goods;
}
},
};
</script>
2、通过辅助函数获取仓库数据
mapState 特点:map 映射 State仓库 : 与仓库里的state一一对应
import {mapState} from 'vuex'
export default{
computed:{
// 辅助函数的数组写法
...mapState(['要取变量1','要取变量2']), 【强烈推荐】
// 辅助函数对象写法
...mapState({
key:(state)=>state.要取变量1,
key1:(state)=>state.要取变量2,
})
}
}
核心Mutations
用于修改仓库数据的唯一方法,如果要修改仓库的数据必须提交一个mutation
// 定义修改的方法,mutation
export default new Vuex.Store({
// 存储状态(数据)
state: {
num: 250,
goods: []
},
// 修改数据的唯一方法,如果要修改状态必须提交一个mutation
mutations: {
// 定义一个修改mutation - 函数名一般为全大写
函数名(state,payload){
state.goods = payload
}
},
})
// 在你的页面直接提交mutation变化,用于修改仓库的数据
this.$store.commit('函数名',实参)
this.$sotre.commit({ 【不推荐】
type:'函数名',
data:实参
})
// 通过辅助函数提交mutation
import {mapMutations} from 'vuex'
export default{
methods:{
// 辅助函数的数组写法
...mapMutations(['函数名'])
// 辅助函数的对象写法
...mapMutations({
key:'函数名1',
key2:'函数名2'
})
}
}
核心Getters
相当与状态管理库的计算属性,对state进行二次处理
// 定义getter处理方法
export default new Vuex.Store({
// 存储状态(数据)
state: {
num: 250,
goods: [
],
// 白马会员列表
whiteHorseVip: [
{ name: '凯子哥', age: 24 },
{ name: '黄子姐', age: 22 },
{ name: '维子哥', age: 26 },
{ name: '俊子哥', age: 18 }
],
},
// vuex里的计算属性
getters: {
// 把数据进行二次处理
whiteHorseVipList(state) {
return state.whiteHorseVip.filter(v => v.age > 18)
}
}
})
// 在页面获取getters里的属性
<template>
<div>
<div>num:{{ $store.getters.whiteHorseVipList }}</div>
<div>
goods:
<p v-for="item in $store.getters.whiteHorseVipList"
:key="item.name"
>{{ item.name }} --{{ item.age }}</p>
</div>
</div>
</template>
<script>
export default {
// 推荐
computed: {
whiteHorseVipList() {
return this.$store.getters.whiteHorseVipList;
}
},
};
</script>
// 辅助函数获取getters属性
import {mapGetters} from 'vuex'
export default{
computed:{
// 辅助函数的数组写法
...mapGetters(['whiteHorseVipList'])
}
}
核心Actions
用于异步修改数据,但是最终修改数据还是需要调用mutation方法
// 在仓库中定义actions
export default new Vuex.Store({
// 存储状态(数据)
state: {
num: 250,
},
// 修改数据的唯一方法,如果要修改状态必须提交一个mutation
mutations: {
SET_NUM(state, payload) {
state.num += payload
}
},
// 处理异步修改数据,最终也要提交一个mutation
actions: {
asyncSetNum(context, payload) { // context === new Vuex()
return new Promise(reslove => {
// 异步操作
setTimeout(() => {
context.commit('SET_NUM', payload)
reslove()
}, 2000);
})
}
},
})
// 在页面触发actions的方法
// 直接触发
this.$store.dispatch('函数名',实参)
this.$store.dispatch({ 【不推荐】
type:'函数名'',
data:'实参'
})
// 辅助函数
import {mapActions} from 'vuex'
export default{
methods:{
// 数组写法
...mapActions(['函数名']),
// 对象写法
...mapActions({
键名:'函数名'
})
}
}
核心modules
模块化,拆分你的仓库
1 定义模块化的仓库
export default new Vuex.Store({
// 模块,把仓库拆分成多个
modules: {
moduleA: {
namespaced: true,
state: {
money: 1000000
},
getters: {},
mutations: {},
actions: {}
},
moduleB: {
namespaced: true,
state: {
money: 10
},
getters: {},
mutations: {},
actions: {}
}
}
})
2 获取模块化里的状态(数据)文章来源:https://www.toymoban.com/news/detail-460671.html
// 直接获取
this.$store.state.模块名.属性名;
// 辅助函数获取
修改模块里的数据文章来源地址https://www.toymoban.com/news/detail-460671.html
<template>
<div>
home
<h1>moneyA:{{ moneyA }}</h1>
<h1>moneyB:{{ moneyB }}</h1>
<div>money:{{ money }}</div>
<button @click="SET_MONEY(100)">改变</button>
<button @click="update">直接改变</button>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
created() {
console.log(this.$store);
},
computed: {
// 辅助函数mpaState获取模块里的数据
...mapState("moduleA", ["money"]),
moneyA() {
// 直接获取modelA里state的属性
return this.$store.state.moduleA.money;
},
moneyB() {
// 直接获取modelB里state的属性
return this.$store.state.moduleB.money;
}
},
methods: {
// 模块化里获取辅助函数
...mapMutations("moduleA", ["SET_MONEY"]),
update() {
// 直接调用模块化里的方法
this.$store.commit("moduleA/SET_MONEY", 200);
}
}
};
</script>
到了这里,关于【无标题】vue的五大核心的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!