大家好，又见面了，我是你们的朋友全栈君。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
name: '张三',
number: 0,
list: [
{ id: 1, name: '111' },
{ id: 2, name: '222' },
{ id: 3, name: '333' },
]
},
// 在store对象中增加getters属性
getters: {
getMessage(state) { // 获取修饰后的name，第一个参数state为必要参数，必须写在形参上
return `hello${state.name}`;
}
},
});
export default store;
每次都写this.$store.getters.XXX让你感到厌烦，你实在不想写这个东西怎么办，当然有解决方案，官方建议我们可以使用mapGetters去解构到计算属性中，就像使用mapState一样，就可以直接使用this调用了，就像下面这样：
<script>
import { mapState, mapGetters } from 'vuex';
export default {
mounted() {
console.log(this.name);
console.log(this.getMessage);
},
computed: {
...mapState(['name']),
...mapGetters(['getMessage']),
},
}
</script>
当然，和mapState一样你也可以取别名，取外号，就像下面这样：
...mapGetters({ aliasName: 'getMessage' }), // 赋别名的话，这里接收对象，而不是数组
使用
console.log('vuex:',this.aliasName);
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/139749.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
