zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【巷子】:关于Apply、call、bind的详解
    关于this的指向问题
    SOA和微服务之间的区别
    业务系统如何微服务化
    微服务架构的理论基础
    每个架构师都应该研究下康威定律
    Rabbit MQ
    Scalability, Availability & Stability Patterns
    应用层协议
    SSO
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9149883.html
Copyright © 2011-2022 走看看