vuex mapState使用
Posted web前端开发技术
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuex mapState使用相关的知识，希望对你有一定的参考价值。
<template>
<div>
{{count}}
<button @click="handleIncrease">+5</button>
<button @click="handleDecrease">-5</button>
<button @click="handleRouter">跳转到 HelloWorld3</button>
<button @click="showRouter">展示路由</button>
</div>
</template>
<script>
import { mapState } from ‘vuex‘
export default {
name: ‘HelloWorld2‘,
computed: {
// count(){
// return this.$store.state.count;
// },
//与上面效果一样
...mapState({
count: state => state.count
})
},
methods: {
handleIncrease() {
this.$store.commit(‘increase‘, 5);
},
handleDecrease() {
this.$store.commit(‘decrease‘, 5);
},
handleAsyncIncrease() {
this.$store.dispatch(‘asyncIncrease‘);
},
handleRouter() {
this.$router.push(‘/HelloWorld3‘);
},
showRouter() {
console.log(this.$router);
console.log(this.$router.push);
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template><div>{{count}}<button @click="handleIncrease">+5</button><button @click="handleDecrease">-5</button><button @click="handleRouter">跳转到 HelloWorld3</button><button @click="showRouter">展示路由</button></div></template>
<script>import { mapState } from ‘vuex‘export default {name: ‘HelloWorld2‘,computed: {//count(){//return this.$store.state.count;//},//与上面效果一样...mapState({count: state => state.count})},methods: {handleIncrease() {this.$store.commit(‘increase‘, 5);},handleDecrease() {this.$store.commit(‘decrease‘, 5);},handleAsyncIncrease() {this.$store.dispatch(‘asyncIncrease‘);},handleRouter() {this.$router.push(‘/HelloWorld3‘);},showRouter() {console.log(this.$router);console.log(this.$router.push);}}};</script>
<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>
</style>
以上是关于vuex mapState使用的主要内容，如果未能解决你的问题，请参考以下文章
使用 Vuex，为啥 mapGetters 不接受与 mapState 相同的语法？
使用 vuex 时如何在 typescript 语法中使用 mapState 函数？
Vuex入门—— state,mapState,...mapState对象展开符详解