Vuex
1.當前在企業開發中我們遇到了兩個問題:
- 1.如果想要在子組件中使用祖先組件中的數據, 那么就必須一層一層的傳遞(非常麻煩)
- 2.兄弟組件之間不能直接傳遞數據, 如果兄弟組件之間想要傳遞數據, 那么就必須借助父組件(非常麻煩)
解決方案: 使用Vuex
2.什么是Vuex?
vuex 是 Vue 配套的 公共數據管理工具，我們可以將共享的數據保存到 vuex 中，方便整個程序中的任何組件都可以獲取和修改vuex中保存的公共數據
【注意點】:
- 必須在引入Vue之后再引入Vuex
- 只有需要共享的數據才放到vuex上, 不需要共享的數據依然放到組件自身的data上
- this.$store是指vuex實例,store就相當于組件中的data，但是它是可以共享的數據
- 3.在祖先組件中添加store的key保存Vuex對象
只要祖先組件中保存了Vuex對象 , 那么祖先組件和所有的后代組件就可以使用Vuex中保存的共享數據了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<!-- 1. 導入vuex，必須在vue.js之后導入-->
<script src="vuex.js"></script>
</head>
<body>
<div id="app">
<grandfather></grandfather>
</div>
<template id="grandfather">
<div>
<p>{{this.$store.state.msg}}</p>
<father>
<son></son>
</father>
</div>
</template>
<template id="father">
<div>
<p>{{this.$store.state.msg}}</p>
<son></son>
</div>
</template>
<template id="son">
<!-- this.$store是指vuex實例,這里指的state里的msg-->
<div>{{this.$store.state.msg}}</div>
</template>
<script>
// 2.創建vuex實例對象
const store=new Vuex.Store({
state:{
msg:"shanjialan"
}
});
Vue.component("grandfather",{
template:"#grandfather",
// store就相當于組件中的data，但是它是可以共享的數據
store:store,
components:{
"father":{
template: "#father",
components: {
"son":{
template:"#son"
}
}
}
}
})
let vue=new Vue({
el:"#app",
});
</script>
</body>
</html>
image.png
Vuex-修改共享數據
state: 用于保存共享數據,在Vuex中不推薦直接修改共享數據,而是在vuex中定義vuex實例的時候在mutations中進行數據修改，有利于在代碼出bug時進行排錯，提高效率
在執行mutations中定義的方法的時候, 系統會自動給這些方法傳遞一個state參數,state中就保存了共享的數據
步驟：
1.在vuex實例的state中聲明共享數據
2.通過vuex對象的mutations來定義修改共享數據的方法
3.在組建的 methods中接收通過this.$store.commit("mutation中的方法")來調用修改數據的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<!-- 1. 導入vuex，必須在vue.js之后導入-->
<script src="vuex.js"></script>
</head>
<body>
<div id="app">
<grandfather></grandfather>
</div>
<template id="grandfather">
<div>
<p>{{this.$store.state.msg}}</p>
<father>
<son></son>
</father>
</div>
</template>
<template id="father">
<div>
<p>{{this.$store.state.msg}}</p>
<son></son>
</div>
</template>
<template id="son">
<!-- this.$store是指vuex實例,這里指的state里的msg-->
<div>{{this.$store.state.msg}}</div>
</template>
<script>
// 2.創建vuex實例對象
const store=new Vuex.Store({
state:{
msg:"shanjialan"
}
});
Vue.component("grandfather",{
template:"#grandfather",
// store就相當于組件中的data，但是它是可以共享的數據
store:store,
components:{
"father":{
template: "#father",
components: {
"son":{
template:"#son"
}
}
}
}
})
let vue=new Vue({
el:"#app",
});
</script>
</body>
</html>
Vuex的getters
1.什么是Vuex的getters?
Vuex的getters屬性就和組件的計算屬性一樣相當于組件中的computed, 會將數據緩存起來, 只有數據發生變化才會重新計算,getters數據和computed一樣，只有數據發生變化才會重新計算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<!-- 1. 導入vuex，必須在vue.js之后導入-->
<script src="vuex.js"></script>
</head>
<body>
<div id="app">
<grandfather></grandfather>
</div>
<template id="grandfather">
<div>
<p>{{this.$store.state.msg}}</p>
<father>
<son></son>
</father>
</div>
</template>
<template id="father">
<div>
<p>{{this.$store.state.msg}}</p>
<son></son>
</div>
</template>
<template id="son">
<div>
<!-- this.$store是指vuex實例,這里指的state里的msg-->
<div>{{this.$store.getters.format}}</div>
<div>{{this.$store.getters.format}}</div>
<div>{{this.$store.getters.format}}</div>
<div>{{this.$store.getters.format}}</div>
</div>
</template>
<script>
// 2.創建vuex實例對象
const store=new Vuex.Store({
state:{
msg:"shanjialan"
},
getters:{
format(state){
console.log("getters function is execuated!");
return state.msg + "shanjialan-getters"
}
},
mutations:{}
});
Vue.component("grandfather",{
template:"#grandfather",
// store就相當于組件中的data，但是它是可以共享的數據
store:store,
components:{
"father":{
template: "#father",
components: {
"son":{
template:"#son"
}
}
}
}
})
let vue=new Vue({
el:"#app",
});
</script>
</body>
</html>
image.png
