Vuex-getters
Markup
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>60-Vuex-getters</title>
<script src="js/vue.js"></script>
<script src="js/vuex.js"></script>
</head>
<body>
<!--
1.什么是Vuex的getters?
Vuex的getters属性就和组件的计算属性一样, 会将数据缓存起来, 只有数据发生变化才会重新计算
-->
<!--这里就是MVVM中的View-->
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<!-- {{formart}}-->
<!-- {{formart}}-->
<!-- {{formart}}-->
<!-- {{this.$store.state.msg}} "www.it666.com"-->
<!-- {{this.$store.state.msg}} "www.it666.com"-->
<!-- {{this.$store.state.msg}} "www.it666.com"-->
{{this.$store.getters.formart}}
{{this.$store.getters.formart}}
{{this.$store.getters.formart}}
</div>
</template>
<script>
const store = new Vuex.Store({
// state: 用于保存共享数据
state: {
msg: "知播渔"
},
// mutations: 用于保存修改共享数据的方法
mutations: {
},
getters: {
formart(state){
console.log("getters方法被执行了");
return state.msg + "www.it666.com"
}
}
});
// 爸爸组件
Vue.component("father", {
template: "#father",
store: store,
// data: function () {
// return {
// msg: "知播渔"
// }
// },
// computed: {
// formart(){
// console.log("计算属性的方法被执行了");
// return this.msg + "www.it666.com";
// }
// }
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
</script>
</body>
</html><< 上一篇
下一篇 >>