0926vue，数据共享，计算属性

最新推荐文章于 2024-06-13 02:48:16 发布

小俊会编码

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量246

点赞数

分类专栏：框架文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_60555957/article/details/127094979

版权

框架专栏收录该内容

29 篇文章 1 订阅

订阅专栏

数据共享 Vuex.Store

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="js/vuex.js"></script>

</head>
<body>
<div id="app">
    <p>app层:{{this.$store.state.msg}}</p>
    <f1></f1>
</div>
<template id="f1">
    <div>
        <b>f1,最上层的组件{{this.$store.state.msg}}</b>
        <f2></f2>
    </div>
</template>
<template id="f2">
    <div>
        <b>f2,中间层的组件{{this.$store.state.msg}}</b>
        <f3></f3>
    </div>
</template>
<template id="f3">
    <div>
        <b>f3,最底层的组件{{this.$store.state.msg}}</b>
    </div>
</template>
<script>

    //创建vuex对象，共享数据放入state中
    const store = new Vuex.Store({//后面这个store是个大写的Store
        state:{
            msg:'hello'
        }
    })
    /*组件*/
    Vue.component('f1',{
        store:store,//将vuex对象，加入到组件当中
        template:'#f1',
        components:{
            "f2":{
                template: "#f2",
                components: {
                    "f3":{
                        template:"#f3"
                    }
                }
            }
        }
    })
    var vue = new Vue({
        store:store,
        el: "#app",
        data: {}
    });
</script>
</body>
</html>

嵌套数据共享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="js/vuex.js"></script>
</head>
<body>
<div id="app">
    <f></f>
    app使用vuex共享数据：{{this.$store.state.count}}
</div>
<template id="f">
    <fiv>
        <f1></f1>
        <f2></f2>
    </fiv>
</template>
<template id="f1">
    <div>
        <p>f的子组件f1</p>
        <button @click="add">add</button>
        <button @click="sub">sub</button>
        <input type="text" :value="this.$store.state.count">
    </div>
</template>
<template id="f2">
    <div>
        <p>f的子组件f2</p>
        vuex共享数据count:{{this.$store.state.count}}
    </div>
</template>
<script>
    //1.
    const store = new Vuex.Store({
        state:{
            count:0
        }
    })
    //2,f组件当中包含了两个组件，第一个组件当中包含了两个方法
    Vue.component("f",{
        template:"#f",
        store:store,
        components:{
            'f1':{
                template:'#f1',
                methods:{
                    add(){
                        this.$store.state.count=this.$store.state.count+1;
                    },
                    sub(){
                        this.$store.state.count=this.$store.state.count-1;
                    }
                }
            },
            'f2':{
                template:'#f2'
            }
        }
    })
    var vue = new Vue({
        store:store,//要想app里面也能使用共享数据，就加上这个
        el: "#app",//el表示要控制的网页，这里通过id来控制
        data: {}
    });
</script>
</body>
</html>

计算方法，计算属性 computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{handlerName}}
</div>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            name:"hello world"
        },
        //计算属性，可以将我们原来的数据进行变化，然后用handlerName来输出变化后的结果
        computed: {
            handlerName() {
                console.log('处理属性的方法执行了');
                return this.name.split("").reverse().join("")
            }
        }

    });
</script>
</body>
</html>

共享数据的计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vuex.js"></script>
</head>
<body>
<div id="app">
    <f></f><!--在网页中使用定义好的组件-->
</div>
<!--tempalte,一开始自己写成了这个，应该是template,如果写错了，标签里面的内容会直接显示出来，但是-->
<template id="f">
    <div>
        {{this.$store.getters.handlerName}}<br>
        {{this.$store.getters.handlerName}}<br>
        {{this.$store.getters.handlerName}}<br>
    </div>
</template>
<script>
    /*1 const,三种定义创建对象的变量方式之一，表示为常量*/
    const store = new Vuex.Store({//数据共享
        state:{
            name:'abcabc'
        },
        mutations:{

        },
        /*相当于34当中的computer计算属性*/
        getters:{
            //computed和getters,都使用了缓存，虽然app里面我们执行了三次，但是我们只调用了一次，剩余的两次我们都是调用缓存
            handlerName(state){
                console.log("处理属性的方法执行了");
                return state.name.split("").reverse().join("");
            }
        }
    })
    /*2.创建组件*/
    Vue.component("f",{
        template:"#f",
        store:store
    })
    var vue = new Vue({
        el:"#app",
        data:{}
    });
</script>
</body>
</html>