1.vuex共享数据
1.1什么是Vuex?
vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据。
- 注意点:
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上
1.2为何使用vuex
1.2.1如果想要在子组件中使用父组件中的数据, 那么必须通过父组件传递
1.2.2如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递
1.2.3兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件
- 注意点:
虽然通过借助父组件能够实现兄弟组件之间的数据传递, 但是这种方式非常的复杂, 非常的不推荐
那么当前在企业开发中我们遇到了两个问题:
1.如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
2.兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(非常麻烦)
1.3如何使用vuex使用Vuex
- 注意点:
必须在引入Vue之后再引入Vuex
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上
<div id="app">
<grandfather></grandfather>
</div>
<template id="grandfather">
<div>
<p>{{this.$store.state.msg}}</p>
<father></father>
</div>
</template>
<template id="father">
<div>
<!--4.在使用Vuex中保存的共享数据的时候, 必须通过如下的格式来使用-->
<p>{{this.$store.state.msg}}</p>
<son></son>
</div>
</template>
<template id="son">
<div>
<p>{{this.$store.state.msg}}</p>
</div>
</template>
<script>
// 2.创建Vuex对象
const store = new Vuex.Store({
// 这里的state就相当于组件中的data, 就是专门用于保存共享数据的
state: {
msg: "知播渔"
},
});
// 爷爷组件
Vue.component("grandfather", {
template: "#grandfather",
// 3.在祖先组件中添加store的key保存Vuex对象
// 只要祖先组件中保存了Vuex对象 , 那么祖先组件和所有的后代组件就可以使用Vuex中保存的共享数据了
store: store,
// 爸爸组件
components: {
"father": {
template: "#father",
// 儿子组件
components: {
"son": {
template: "#son",
}
}
}
}
});
let vue = new Vue({
el: '#app',
data: {
},
methods: {
},
computed: {
},
components: {
},
});
</script>
2.vuex修改共享数据
2.1直接修改共享数据
下面代码是通过组件中的方法直接修改共享数据，但是我们平常不推荐这样直接修改共享数据
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<son1></son1>
<son2></son2>
</div>
</template>
<template id="son1">
<div>
<input type="text" :value="this.$store.state.age">
<button @click="add">增加</button>
<button @click="sub">减少</button>
</div>
</template>
<template id="son2">
<div>
<p>{{this.$store.state.age}}</p>
</div>
</template>
<script>
let store = new Vuex.Store({
state: {
age: "18"
},
mutations: {
// add(){
//
// }
}
})
Vue.component("father", {
template: "#father",
store: store,
components: {
"son1": {
template: "#son1",
methods: {
add(){
this.$store.state.age++;
},
sub(){
this.$store.state.age--;
}
}
},
"son2": {
template: "#son2",
}
}
})
let vue = new Vue({
el: "#app",
})
</script>
- 注意点: 在Vuex中不推荐直接修改共享数据
如果多个组件都修改了共享的数据, 那么后期数据发生了错误, 我们如果需要去调试错误
就需要把每一个修改了共享数据的组件都检查一遍, 这样非常低效, 非常的不利于我们去维护
2.2通过mutations修改共享数据
在定义vuex的时候在mutations中定义方法
let store = new Vuex.Store({
state: {
age: "18"
},
mutations: {
mAdd(state){
state.age++;
},
mSub(state){
state.age--;
}
}
})
在组件的自定义的方法中引入mutations中需要的方法
Vue.component("father", {
template: "#father",
store: store,
components: {
"son1": {
template: "#son1",
methods: {
add(){
// this.$store.state.age++;
this.$store.commit("mAdd")
},
sub(){
// this.$store.state.age--;
this.$store.commit("mSub")
}
}
},
"son2": {
template: "#son2",
}
}
})
<button @click="add">增加</button>
<button @click="sub">减少</button>
3.vuex中的getter属性
3.1什么是Vuex的getters
Vuex的getters属性就和组件的计算属性一样, 会将数据缓存起来, 只有数据发生变化才会重新计算。
const store = new Vuex.Store({
state: {
msg: "wlw",
},
mutations: {
},
//getters处理共享数据
getters: {
mMsg(state){
return state.msg + "18";
}
}
})
- 对于组件中的数据我们还是使用computed，对于共享数据我们使用getters。
