两个vue对象共享一个data，模拟Vuex

最新推荐文章于 2023-11-18 16:59:59 发布

胖鹅68

最新推荐文章于 2023-11-18 16:59:59 发布

阅读量662

点赞数

分类专栏： Vue2.x、vuex、iview、vux

本文链接：https://blog.csdn.net/hbiao68/article/details/100577572

版权

Vue2.x、vuex、iview、vux 专栏收录该内容

68 篇文章 3 订阅

订阅专栏

文章目录

- 案例
- - 多个Vue组件共享相同的数据
  - Vue组件数据不共享

案例

多个Vue组件共享相同的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{username}}</div>
        <div>
            <button @click='changeName'>改变琦琦</button>
        </div>
    </div>

    <div id="app2">
        <div>{{username}}</div>
        <div>
            <button @click='resetNameAction'>reset琦琦</button>
        </div>
    </div>
</body>
<script>
// 定义了一个公共的数据
var store = {
    username: 'qiqi',
    // 改变数据的内容
    resetName: function () {
        this.username = 'reset Name';
    }
}

var app = new Vue({
    el: '#app',
    data: store,
    methods: {
        // 直接改变数据的值
        changeName: function () {
            this.username = 'zhangsan'+ new Date().getTime();
        }
    },
})    

var app2 = new Vue({
    el: '#app2',
    data: store,
    methods: {
        // 通过store对象改变 store的值
        resetNameAction: function () {
            store.resetName();
        }
    },
})    
</script>
</html>

app和app2共用相同的数据store
app和app2任何一个改变了数据，其他的组件都会受到影响
store本身也可以改变数据，当他的数据改变之后，也会影响到对应的Vue对象

上面就是Flux的思想，Vuex就是对这种思想的实现

Vue组件数据不共享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <son-component></son-component>
        <hr/>
        <son-component></son-component>
    </div>

    <div id="app2">
        <son-component></son-component>
    </div>
</body>
<script>
// 定义全局组件，被各个Vue 对象所拥有
Vue.component('son-component',{
    template: `
        <div>
            <div>
                {{username}}
            </div>    
            <div>
                <button @click="changeName">change naoteng</button>
            </div>         
        </div>
    `,
    // 如果存在多个相同的组件，每个组件都是返回一个新的相同的JSON对象，组件彼此互不干扰
    data:  function () {
        return {
            username: 'naoteng'
        }
    },
    methods: {
        changeName: function () {
            this.username = 'zhangsan'+ new Date().getTime();
        }
    }
})  


var app = new Vue({
    el: '#app',
})    

var app2 = new Vue({
    el: '#app2',
})    
</script>
</html>