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>
  • 相关阅读:
    oracle pl/sql 中目录的创建
    oracle pl/sql中创建视图
    oracle pl/sql 函数中链表的使用
    oracle pl/sql 中的触发器
    (转载)gcc/g++打印头文件包含顺序和有效性
    (转载)Linux平台可以用gdb进行反汇编和调试
    (转载)轻量级Web服务器Lighttpd的编译及配置(for x86linux)
    (转载)浮点数的二进制表示
    gdb如何进行清屏
    gdb设置运行参数
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9149883.html
Copyright © 2011-2022 走看看