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
