zoukankan      html  css  js  c++  java
  • Vuex学习总结

    4.Vuex核心概念

    4.1 State

    使用mapState

    import {mapState} from 'vuex'
    
    export default {
    	name: "Counter",
    	// computed: {
    	//     count() {
    	//         return this.$store.state.count
    	//     }
    	// },
    	computed: mapState({
    		count: state => state.count
    	}),
    	methods: {
    		increment() {
    			this.$store.commit('increment')
    		}
    	}
    }
    
    <template>
        <div>
            <button @click="increment">加一</button> {{count2}}
            <br/>
            {{countAlias1}}
        </div>
    </template>
    
    <script>
        import {mapState} from 'vuex'
    
        export default {
            name: "Counter",
            // computed: {
            //     count() {
            //         return this.$store.state.count
            //     }
            // },
            computed: mapState({
                count2: state => state.count,
                countAlias1: 'count2'
            }),
            methods: {
                increment() {
                    this.$store.commit('increment')
                }
            }
        }
    </script>
    
    <template>
        <div>
            <button @click="increment">加一</button> {{count}}
            <br/>
            {{countAlias}}
            <br/>
            {{countPlusLocalState}}
        </div>
    </template>
    
    <script>
        import {mapState} from 'vuex'
    
        export default {
            name: "Counter",
            data() {
                return {
                    localCount: 2
                }
            },
            computed: mapState({
                count: state => state.count,
                countAlias: 'count',
                countPlusLocalState(state) {
                    return state.count + this.localCount
                },
            }),
            methods: {
                increment() {
                    this.$store.commit('increment')
                }
            }
        }
    </script>
    

    将本地计算属性与mapState合并的方法。

    <template>
        <div>
            <button @click="increment">加一</button> {{count}}
            <br/>
            {{localComputed}}
        </div>
    </template>
    
    <script>
        import {mapState} from 'vuex'
    
        export default {
            name: "Counter",
            data() {
                return {
                    localCount: 2
                }
            },
            computed: {
                localComputed () {
                    return this.count + this.localCount
                },
                ...mapState(['count']),
            },
            methods: {
                increment() {
                    this.$store.commit('increment')
                }
            }
        }
    </script>
    

    Vuex实例中的共享状态可以被追踪和调试,如果一个状态属于单个组件,那么将其保留为本地状态就可以了。

  • 相关阅读:
    如何还原Microsoft Office Word 2003默认的Normal.dot模板文件
    如何解决VMware Workstation 10.0.0 build-1295980马赛克现象
    通过更改注册表信息来恢复Microsoft Office 2003默认设置
    在运行Eclipse时明确指定要使用的Java VM
    修改Eclipse启动图像
    Get IPv4 Address 1.0
    hosts appender 2.0
    Extract String From Text 1.0
    String Replace 1.0
    360 Extension for Chrome Download 1.0
  • 原文地址:https://www.cnblogs.com/gzhjj/p/14348492.html
Copyright © 2011-2022 走看看