大家好，又见面了，我是你们的朋友全栈君。
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg:"Hello Vuex!",
name:"cxj",
age:18,
hobby:"美女"
},
getters: {
tenYearsOld(state){
return state.age + 10;
},
},
mutations: {
},
actions: {
},
modules: {
}
})
App.vue
<template>
<div id="app">
计算属性赋值ctenYearsOld:{
{ctenYearsOld}}
<hr>
mapGetters赋值tenYearsOld:{
{tenYearsOld}}
</div>
</template>
<script>
import {mapState,mapGetters} from 'vuex';
/*
ctenYearsOld:组件较多，且每个组件都要进行相同操作时，每个组件都需要定义，代码重复
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据
它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：多个组件都需要用的时候只用定义一次。
*/
export default {
name: 'App',
components: {
},
computed: {
...mapState(["msg","name","age"]),
...mapGetters(["tenYearsOld"]),
ctenYearsOld(state){
return state.age + 10;
},
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
效果截图：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/137762.html原文链接：https://javaforall.net
